【2021年最新版】WordPressで画像が表示されない場合の対処法

皆様こんにちは。
今回はコンサルやビジネススキルといった内容ではありません。

本日は、WordPressで画像がいきなり表示されなくなってしまった場合の解決方法の指南になります。(私です笑)

今回、解決に至るまでにインターネットで色々と調べ、結果、見事に解決しました。
その内容を共有したいと思います。
全く心当たりがないにも関わらず、ある日自分のサイトを見たら画像が表示されなくなっていた方は、参考になるかも知れません。

ブログの構築環境

まず、この記事が参考になるのは、私と同じようにブログを構築された方です。

私は技術的なことには全くの素人ですので、先人たちの記事を参考にしつつ、非常にオーソドックスな環境でこのブログを構築・運営してきました。

具体的には以下になります。

  • レンタルサーバ : ロリポップ (月250円のライトプラン。SSL証明書も導入済)
  • WordPressテーマ : Cocoon (無料テーマ)
  • WordPressプラグイン : 無料プラグインを10個ほど
  • 記事や画像の更新 : 全てWordpressのダッシュボード (管理画面)経由 (FTPは不使用)

具体的な症状

「画像が表示されない」と言っても、様々な症状があります。
私の場合は、以下の症状でした。

  • WordPressの記事投稿/編集画面では画像が表示される
  • 記事がアップされたページでは、画像が表示されない (代替テキストは表示されている)
  • AMP用のURLでは画像が表示される (AMP対応されているサイトでは、記事のURLの後に “?amp=1” のようなURLがAMP用のURLになります。これはサイトによって異なります。)

WordPressで画像が表示されなくなる原因と対処

昨日まで表示されていた画像が表示されなくなった！
そこには必ず原因があります。
私は素人ですので、すべての操作をWordpressの管理画面から行っています。
難しい設定やサイトの移行なども一切やっていません。

ですので、インターネット上で色々と書かれている原因には思い当たるものがなく、原因が判明するまで3時間ほどかかりました。

参考になる方もいらっしゃると思いますので、一般的な画像が表示できない原因と調べた記事を共有しておきます。

  1. 画像のURLがおかしい
    WordPressの設定で画像の保存先を変更していたり、レンタルサーバを移行した場合に生じるようです。
    画像のURLを直接入力し、画像だけを表示させようとすると403 / 404エラーになる場合などがこれに該当します。

    【参考記事】
    ・https://nekomoriya.biz/works/6441.html
    ・https://ecmemo.net/wordpress_img_none

  2. SSL対応がうまくいっていない
    サイトを最近SSL対応させた    いう方は、サイトURLと画像URLのプロトコル部 (SSL対応すると　”http:” から “https:” になります) が異なるために画像が表示できない可能性があるとのこと。

    【参考記事】
    ・https://xn--p8jc0b9i5a41eb.website/wordpress%E3%81%A7%E7%94%BB%E5%83%8F%E3%81%A0%E3%81%91%E3%81%8C%E8%A1%A8%E7%A4%BA%E3%81%95%E3%82%8C%E3%81%AA%E3%81%84%E3%80%81%E3%81%9D%E3%81%AE%E5%8E%9F%E5%9B%A0%E3%81%AF%E3%83%BB%E3%83%BB%E3%83%BB.html

  3. Lazy Loadのせい
    Lazy Loadとは、WordPressの画像表示を高速化する仕組みです。
    私のサイトではCocoonとJetpackの該当する設定がONになっていました。
    しかし、原因はこれではありませんでした。(ONのままで大丈夫です！)

    【参考記事】
    ・https://selifelog.com/blog-entry-1517.html

  4. 画像サイズ縮小プラグインのせい
    結論、私の場合はこれが原因でした。
    具体的には、EWWW Image Optimizerという比較的有名なプラグインです。

    実はこれに行き着いたのは、「AMP対応したら画像が表示されなくなった」という記事があったためです。
    私の症状とは真逆なのですが、何となく気になってプラグインを無効化したら見事に画像が表示されたのです！！

    【参考記事】
    ・https://soundorbis.com/amp-image-notdisplay/


    私と同じ症状で、同じように画像が表示されなくなった方は、
EWWW Image Optimizerを無効化してみてください。

これだけです！簡単ですね。
しかしここに行き着くまで3時間。。涙

この記事を読んで役に立ったという方が1人でもいらっしゃれば幸いです。


今回の記事は以上になります。
お読みいただき、ありがとうございました！