ブログの画像が表示されない9つ＋αの原因！リンク切れの対処法

ブログの画像が「壊れた絵」になって表示されるのは画像のURLが変わったのが原因なんですね。CSSやHTML（投稿画面のテキストモードやphpファイルなど）に書いてるパスと一致してないからそうなります。

画像のリンクを踏むと404NotFoundページ、そもそも画像が表示されない。考えられる原因と解決方法の紹介です。基本的なことから順にチェックしてくださいね。

ファイル名やパスが違って、URLが一致してないから画像が表示されない

画像もブログと同じでURLで表示されます。元々あった画像ファイルをサーバーなどで名前を変更すると、画像のURLが変わるのが原因だったり。

このばあい原因は根本的に同じで、画像のファイル名やURLがテンプレートに書いた記載（HTMLやCSS）と違ったり、元のディレクトリ（画像を格納してる場所）のパスが違うのが原因になってます。

その他、考えられる原因を、参考にしてください。

サーバーでファイル名を変えた！原因1

サーバーを借りて運営してると、直接サーバーのFTPに入って画像ファイル名を変更できますよねっ。ファイル名がURLになってる事をすっかり忘れて、名前を変えたから壊れた絵が表示するんです。

下記のちっちゃい画像がリンク切れをおこしたとき表示される「壊れた絵」。

• HTMLやCSSには元のファイル名「topA.gif」と書かれてるのに後に「topB.gif」に書き換えた

https://bibabosi-rizumu.com/wp-content/uploads/2016/02/topA.gif

https://bibabosi-rizumu.com/wp-content/uploads/2016/02/topB.gif

画像のURLは最後ファイル名になってますよねっ。『topA.gif』『topB.gif』URLの最後が違うから、表示できずに「リンク切れ」をおこしてしまったんですね。

実際画像をアップして見ればわかるのでご覧ください。「topA.gif」って画像をアップしました。

サーバーで画像『topA.gif』のファイル名を『topB.gif』に名前を変更して保存してみますね。

すると、リンク切れをおこして「壊れた画像」が表示します。

対処法：画像ファイル名とイメージソースを一致させる

• 画像ファイル名を戻す
  

  画像名BにしたからAは表示されない

  

  サーバーで画像ファイル名BをAに戻す

• 新たに正しい画像ファイル名をセットしてアップしなおす、など。

画像ファイル名を日本語でアップしたとき。原因2

カスタマイズしようとしたとき、画像のファイル名を日本語にしてphpファイルに書き込んだは良いけど、実際アップした画像ファイル名は、日本語ではなくやけに長い名前に変わってるって事があります。

例えば「トップへ戻る.gif」を指定したフォルダ内にアップします。

『トップへ戻る.gif』をURLのファイル名はどうなるか？ロリポップでは下記のようなファイル名に変更されます。

62a06d16b0a8552a6e71d552538aa191.gif

それなのに、HTML（footer.phpなど）に指定したファイル名はどうなってるか？

『/images/トップへ戻る.gif』と指定してる！『トップへ戻る.gif』ファイルでアップしたけど、実際のファイル名は下記。

62a06d16b0a8552a6e71d552538aa191.gif

実際のファイル名と違った書き方をしてるときリンク切れをおこします。URLが違ってくるから画像が反映されないんですね。

%e6%97%a5%e6%9c%ac%e8%aa%9e%e3%83%95%e3%82%a1%e3%82%a4%e3%83%ab.png

上記みたいな表示になる場合もあるかも知れません。どちらにしてもローマ字でアップしなおしてHTMLとあわせてあげないとダメですねぇ。。

参考「トップに戻るボタンを画像に変更する方法」の目次「画像が表示されないっ、反映されない原因は？」

対処法：ファイル名を半角英数字にするか、HTMLに画像URLを挿入

• 名前をローマ字にして該当フォルダ内へアップする
  

  画像は参考例

• HTMLの記載してる箇所に該当画像URLを記載する
  <img src=”ここに表示させたい画像URL” alt=”” />

拡張子が違ってる場合。pngじゃなく別の拡張子など。原因3

画像を保存するときの拡張子が違ってるときも上述と同様、URLが違ってきます。そうなると。実際の画像を収納してるフォルダ内の、画像名と拡張子をURLとして指定してるのに、拡張子が違えばURLも違ってくる。

https://bibabosi-rizumu.com/wp-content/themes/hoge/images/pagetop.png

https://bibabosi-rizumu.com/wp-content/themes/hoge/images/pagetop.jpg

『http://～～/pagetop.png』『http://～～/pagetop.jpg』当然のごとく画像は表示してくれません。。

対処法：HTMLとディレクトリの画像の拡張子をあわす

• 『.png』『.jpg』『.gif』など正しい拡張子を知ってHTMLを書き直す
  /images/hoge.png　→　/images/hoge.jpg
• HTMLに記載してる拡張子に変更する
  画像の拡張子をスクリーンプレッソなどを使って変更

ファイルまでのディレクトリ、フォルダ名（パス）が違うとき。原因4

画像をアップしたディレクトリ（画像の格納場所）のパスが違ってる場合に起こります。例えれば

1. https://bibabosi-rizumu.com フォルダ内の
2. wp-content フォルダ内の
3. themes フォルダ内の
4. gush テーマ フォルダの下層
5. images フォルダ内に
6. hoge.png 画像アップ

上記ディレクトリに画像「hoge.png」をアップしてるのに、HTMLやCSSには別の記載になってる

1. themes フォルダ内の
2. gush2-child テーマフォルダ内の
3. images フォルダ内に
4. hoge.png 画像がない

HTMLでは子テーマディレクトリimagesフォルダ内にhoge.pngを表示させる記載なのに、実際は親テーマ内フォルダの下層にアップしてたなどです。imgタグ内に関数を使ってる記載と合わなかった場合も画像は反映されません。

imgタグ内の”画像URL”にWordPress関数が入ってるとき

WordPressのコードを見てると画像タグ内のURLをいれるところに、関数が入ってる場合を目にします。<img src=”ここ画像のURL” alt=”代替テキスト” />そこに下記コードが入ってるんですね。

"<?php echo get_template_directory_uri(); ?>/images/hoge.png"

これは、親テーマの/imagesフォルダ内に/hoge.pngをアップしたら表示しますよぉって事で、子テーマ内にアップするならget_template_directoryの『template』が、『stylesheet』と書くんですね。

そうしたら子テーマのディレクトリの/imagesフォルダ内に/hoge.pngをアップしたら表示するからねっ♪ってなるんです。下記が子テーマを呼び出す記載「get stylesheet　directory uri」ってなってますよね。

"<?php echo get_stylesheet_directory_uri(); ?>/images/pagetop.png"
子テーマ/images/pagetop.pngアップで表示

例えばテンプレート ディレクトリURIは、親テーマ内に画像をアップしないと表示されませんよぉ♪って言ってるのを知らずに子テーマのimagesフォルダに画像をアップしたらディレクトリが違ってるから表示されませんよっ♪って例です。

"<?php echo get_template_directory_uri(); ?>/images/hoge.png"
親テーマの/images/hoge.pngアップしたら表示

対処法：ファイルまでのパスとHTMLをあわせる

• パスどおりの場所へ画像をアップする
  

  参考例

• 逆に、HTMLの記載箇所にアップしてる画像のパスをいれてあげる。など
  <img src=”ここに表示させたい画像URL” alt=”” />

対処法は、あなたが何をやりたいかによって変わるけど、いち参考例としてヒントになればって思ってます。

imgタグ内の”画像URL”に関数が入ってる場合

"<?php echo get_template_directory_uri(); ?>/images/hoge.png"

下記リンクをさんこうにしてください。

参考「get template directory uri、get stylesheet directory uri」関数の違いは親テーマと子テーマのディレクトリ

画像を削除してしまっている。原因と対処法5

アップした画像を削除すると、リンク切れを起こして404ページを表示させてしまいます。画像のURLは、上述のとおりアップした画像ファイル名と拡張子と、ファイルまでのパスがはいってるんですね。

「https://bibabosi-rizumu.com/wp-content/uploads/2016/02/hoge.png」最後の「hoge.png」がファイル名になります。

e93c767bb3a5d652a5d3357f5ff54472.jpg

上記のような画像ファイルを削除してしまったら、表示させたくっても表示させるファイルがないからリンク切れをおこして404 Not Foundを表示させてしまったんですねっ。再度アップしなおして、画像を貼りなおせば表示されますよ。

対処法：リンク切れの画像を削除、必要であれば再度アップ

1. リンク切れをおこした画像を、記事投稿画面より削除
2. 必要であれば再度、画像をアップし表示させる

直リンクしてる可能性は！？原因6

他サイトの画像をコピーして自分のブログに貼り付けてることを直リンクといって、相手サーバーに付加がかかるため、画像が表示されないこともあります。

• 直リンクはマナー違反だから、それを禁止する設定をする運営者もいる。
• .htaccessで直リンクの画像を表示させない設定もある。

思いもよらずマナー違反をしてる可能性もあります。心当たりがあれば、改善してください。

LINK画像引用時の出典の書き方！直リンクは何でダメ？ブログのマナーの話

対処法：直リンク画像をブログにアップ

画像をいったんPCなどのローカルに保存してから、ご自身のブログへブログへアップしてくださいね。

ただし著作権の問題もあるので、それに違反して損害賠償ざたにならない範囲で。これが大前提ですよ。

LINK画像引用時の出典の書き方！直リンクは何でダメ？ブログのマナーの話

原因7・画像の転送モードが違うときの対処

サーバーを借りている場合、画像をFTPソフトなどでBINARY modeでアップしてますよね？アスキーモードでアップしてないか確認してください。

• 転送モードを自動にしていると、バイナリモードでアップするから表示される
• アスキーモードを選択してアップすれば画像が表示されない

ブラウザの設定の可能性、原因8

Google Chromeなどブラウザの設定で、すべての画像を表示しない設定にしてはないですか？この場合、すべての画像が表示されません。

• すべての画像を表示するに変更後、完了して設定を保存しなおしてください。

エラードキュメントを指定・その他…考えられる原因9

サーバーを借りてWordPressなどで運営している場合、画像のパスをHTMLで指定し.htaccessで、ErrorDocument 503など指定している場合。

503はサーバーによるアクセス制限がかけられてる状態、またはメンテナンス中で制限している状態です。

同じドメイン・同じサブドメイン内の画像を表示できません。別の（サブ）ドメイン内で画像を置いて表示させる方法もあります。（既に負荷がかかっているので、重くなるからオススメしません。。）

LINKこんな簡単で良い？WordPreesで自作503ページ！離脱阻止できるページを作ちゃおう！

あとは、キャッシュを切ったり、cookieの削除などでしょうか。

LINK普段見てるページにエラー・不具合があったとき、試してほしいこと

表示されない画像（壊れた絵）のURLを確認する方法

上述通り表示されない（HTMLに書かれた）画像のパスは管理画面より該当のPHPファイルのHTMLをみたり、投稿画面のビジュアルではないテキストの方でHTMLを確認できます。

表示されずに壊れた画像マークが表示されている場合、その画像を右クリックして別タブに表示するなどして画像のパスがあっているか確認してください。

HTMLに書かれた通りのパス・URLでなければ、画像は表示されません。

1. 例：https化されたアドレスとhttpのアドレスの違い

HTMLに書かれた文字列https://domain.com/wp-content/uploads/2017/08/hoge.png
実際の画像のパスhttp://domain.com/wp-content/uploads/2017/08/hoge.png

1. 例：ファイルのアップロード先の指定が違う

HTMLに書かれた文字列http://hoge-domain.com/wp-content/uploads/2017/08/hoge.png
実際の画像のパスhttp://domain.com/wp-content/uploads/hoge.png

さいごに

画像がリンク切れをおこして404 Not Foundのページを出す場合もあります。

WordPressで既存のテーマテンプレートで404ページを簡単に作って自ブログを紹介するチャンスでもあるのでカスタマイズしてみては いかがでしょうか♪

LINKWordPressで404エラーページをカスタマイズ！超簡単に工夫して作る方法

画像の入れ替え後はキャッシュが残っているので、実際どう表示されてるのか不明なとき、拡張機能でキャッシュのない状態を、すぐ作ることもできます。

LINK便利過ぎて神！カスタマイズ時のキャッシュを削除！ワンクリで手間省けるChrome拡張機能「Incognito This!」

カスタマイズの失敗をくり返すと、ブログ書くヒマなくなりますけど、たまには遊んでみてくださいねぇ＾＾

それでは、かうたっくでしたっ！