Elementorで編集画面でセットした画像が、プレビューや実際のWEBページで見ると表示されないことがあります。
画像が見つからないときに表示されるリプレイスメントのアイコンが表示されます。

この原因と対処法についてまとめています。
原因
ElementorはWordPressのサイトURL設定を基に画像のパスやフォントの読み込みを行います。
そのため、WordPressアドレス(URL)とサイトアドレス(URL)が一致していない場合に、プレビュー時に問題が発生します。
特に、HTTPSとHTTPの混在や、www.の有無が原因となることが多いです。
例えば、サイトアドレスがhttps://example.comなのに、ElementorのプレビューURLがhttp://example.comになっていると、画像やフォントが読み込まれません。
今回の場合は、ドメイン自体はhttpsにしているのに、WordPressアドレス(URL)とサイトアドレス(URL)がhttpになっていることでした。
対処法
対処法は簡単です。
WordPressの管理画面で「設定 → 一般」へと進みます。

例えば、WordPressアドレス(URL)とサイトアドレス(URL)がhttpになっている場合は、これを修正します。

↓ httpsに直します。

以上で修正は完了です。
無事にプレビューや本番環境でページが表示されました。
もし、編集画面では画像が表示されるのに、プレビューや実際のWEBページで見ると表示されないという場合は試してみてください。


