HTML画像がブラウザで表示されない

Question

前提・実現したいこと

XDから画像を書き出してHTMLに組み込み表示させたいのですが全て表示されません。
ここに質問の内容を詳しく書いてください。
（例）PHP(CakePHP)で●●なシステムを作っています。
■■な機能を実装中に以下のエラーメッセージが発生しました。

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

<figure class="lp-global_inner_flex_box"> <img src="<?php get_template_directory_uri()?>　wp-content/themes/ill/img/credit-card-duotone.png" alt="オンライン決済"> <figcaption>オンライン決済導入</figcaption> <p>オンライン決済サービスの導入サポート、既存サイトへの決済機能の追加を行います。</p> </figure> ```ここに言語名を入力 ソースコード ```

試したこと

ここに問題に対して試したことを記載してください。
ファイルのパスは同じ　再起動したりもしてみました
その他原因がわかりません

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Comments

[m.ts10806]

PHPはどう関係するのでしょう。
WordPressでしょうか。タグに追加してください。

[pecker]

ありがとうございます。
変更させていただきました。

Answer 1

get_template_directory_uri()
はテーマのURIになりますので、illというのがテーマで直下にimgディレクトリがあるのであれば

<img src="<?php echo get_template_directory_uri()?>/img/credit-card-duotone.png" alt="オンライン決済">

さらにecho等で表示する必要もあります。

（追記）
子テーマを作っている場合は代わりにget_stylesheet_directory_uri()を使ってください。

Answer 2

get_template_directory_uri()
https://developer.wordpress.org/reference/functions/get_template_directory_uri/

Does not return a trailing slash following the directory address

<img src="<?php get_template_directory_uri()?>/wp-content/themes/ill/img/credit-card-duotone.png" alt="オンライン決済">

じゃないのかね

Answer 3

全角空白入ってますが問題ないですか？

     ↓ここ
)?>[　]wp-content

Comments

[pecker]

ご指摘ありがとうございます。
確かに全角で修正したところ、まだ表示がされません。
wordpress側の容量とかの問題なのでしょうか。

[m.ts10806]

容量はあくまでマシーンスペックの話。容量オーバーならそもそも画像を保存できません。
結局、指定してるパスが違うんでしょう。画像URL確認してください。

[pecker]

すごく参考になりました。
もう一度細かなパスをチェックしていきたいと思います。
ありがとうございました。

[m.ts10806]

https://wpdocs.osdn.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/get_template_directory_uri
「有効化している テンプレート ディレクトリの URI」らしいですよ。
画面表示したときにブラウザの「ソースを表示」かデベロッパツールからどういうパスになっているか見ては？
かなり重複した出力内容になってる気がします。