HTMLで作成したサイトWordpress化した際画像が読み込まれない問題

Question

HTMLで作ったサイトをWordpress化したのですが、画像が404エラーになってしまいます。ページ読み込み時に一瞬表示されるのですが、読み込み完了後にエラーになり、表示されなくなってしまいます。
ファイルは以下の画像のように格納しています。

次にコンソール上でのエラー表示です。

該当するphpファイルのコードは以下のように指定しております。

 <img class="lazyload fadein" src="<?php echo get_template_directory_uri(); ?>wp-content/themes/original/img/prof.jpg">

<img class="lazyload fadein" src="<?php echo get_template_directory_uri(); ?>/img/works/animal.png">

ただ以下の画像だけは正しく表示されます。

  <a href="https://www.facebook.com" target="_blank"><img src="<?php echo get_template_directory_uri(); ?>wp-content/themes/original/img/contact/icon_fb.png"></a>

altを追加してみましたが動作は変わらずです。
画像が読み込まれない箇所の表示が以下のようになっているので、パスが間違っているのかと思いますが、いろいろな指定を試してみても変わりません。
どうしたらよいでしょうか。

Answer 1

Webブラウザのデベロッパーツールで、ソースコードを確認すると 画像ファイルの URL は、どうなっていますか？
また、デベロッパーツールのコンソールを見るとなにかメッセージは出ていませんか？

---

<img class="lazyload fadein" src="<?php echo get_template_directory_uri(); ?>wp-content/themes/original/img/prof.jpg">

get_template_directory_uri() 関数は、 関数リファレンス/get_template_directory_uri に

有効化している テンプレート ディレクトリの URI を取得する。SSL が存在するかチェックする。
注意: 末尾にスラッシュ（ / ）は含まれません。

とあるようにテーマディレクトリの URI を取得します。

たとえば、example.com で、TwentyTwenty テーマを使っていると仮定した場合、get_template_directory_uri() では、 http://example.com/wp-content/themes/twentytwenty が、帰ってきます。(最後に / は付きません。)

質問にある

<img class="lazyload fadein" src="<?php echo get_template_directory_uri(); ?>wp-content/themes/original/img/prof.jpg">

では、画像ファイルの URL は、http://example.com/wp-content/themes/originalwp-content/themes/original/img/prof.jpg となっているのではないでしょうか？

Comments

[r_tec]

デベロッパーツールでは以下のようになっております。
<img class="fadein raiki kanno lazyloaded" src="img/prof.jpg" data-src="img/prof.jpg" alt="">
コンソールでは該当ファイルが404エラーだという表示のみです。質問文に画像を追加します。

Answer 2

index.phpを編集していたのが原因だったみたいです。home.phpを編集したら解決しました。