htmlのimgタグにて画像が表示されない原因を教えて下さい。

Question

前提・実現したいこと

勉強のため自社サイトをスクレイピングし、テーブルに表示するプログラムを書いています。
スクレイピングにて取得した画像URL(https://example.com/image/hoge.jpg)をimgタグのsrc属性に入れているのですが、思うように表示されず困っております。

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

下記、該当のソースコード欄のコードを実行しています
実行しただけでは画像が表示されないのですが、一度自社サイトを開き、画像を表示させてから実行すると正常に表示されるようになります。
エラーメッセージ等は出ず、ただ画像が表示されていません

該当のソースコード

~~~~~~略
      <table class="table table-striped table-bordered">
        <?php foreach ($array as $k => $cel) :
          if ($k % 5 === 0) : ?>
        <tr>
          <td><a href="<?= $cel['url'] ?>"><img src="<?= $cel['img'] ?>" width="250" height="355" alt=""></a><br><span><?= $cel['title'] ?></span></td>
          <?php elseif ($k % 5 === 1) : ?>
          <td><a href="<?= $cel['url'] ?>"><img src="<?= $cel['img'] ?>" width="250" height="355" alt=""></a><br><span><?= $cel['title'] ?></span></td>
          <?php elseif ($k % 5 === 2) : ?>
          <td><a href="<?= $cel['url'] ?>"><img src="<?= $cel['img'] ?>" width="250" height="355" alt=""></a><br><span><?= $cel['title'] ?></span></td>
          <?php elseif ($k % 5 === 3) : ?>
          <td><a href="<?= $cel['url'] ?>"><img src="<?= $cel['img'] ?>" width="250" height="355" alt=""></a><br><span><?= $cel['title'] ?></span></td>
          <?php elseif ($k % 5 === 4) : ?>
          <td><a href="<?= $cel['url'] ?>"><img src="<?= $cel['img'] ?>" width="250" height="355" alt=""></a><br><span><?= $cel['title'] ?></span></td>
        </tr>
        <?php endif; ?>
        <?php endforeach; ?>
      </table>
~~~~~~略

>それも、載せてください。
該当部分のソースはこちらになります
<td><a href="https://example.com/282646/"><img src="https://example.com/image/282646/hoge.jpg" width="250" height="355" alt=""></a><br><span>hogeさん</span></td>

試したこと

画像が表示されていない時にブラウザのソースを表示してみたところ、正常にsrcにURLが入っているのは確認済みです。
説明が下手で申し訳ありませんが、原因を教えていただけると助かります。

Comments

[otn]

> ブラウザのソースを表示してみたところ
それも、載せてください。

[m.ts10806]

質問に「何かしらのドメイン」を提示される場合はなるべく例示ドメインで提示してください。
https://ja.wikipedia.org/wiki/Example.com

[m.ts10806]

>一度自社サイトを開き、画像を表示させてから実行する
あとここが良く分かりません。提示のコードはその「自社サイト」ではないのでしょうか。どこで実行されているコードなのでしょうか

[退会済みユーザー]

>それも、載せてください。
該当部分のソースはこちらになります
<td><a href="https://hogehoge.net/282646/"><img src="https://hogehoge.net/image/282646/hoge.jpg" width="250" height="355" alt=""></a><br><span>hogeさん</span></td>

[退会済みユーザー]

すみません、正常に書けれなかったので、該当のソースコード欄の下に追記しました。

>あとここが良く分かりません。提示のコードはその「自社サイト」ではないのでしょうか。どこで実行されているコードなのでしょうか
ローカル(http://localhost:8080/test/index.php)で実行しているコードになります。
スクレイピング先は自社サイトです。

[otn]

↑あきらかにおかしいですね。

[退会済みユーザー]

申し訳ありません、このコメント内だとコードが正常に書けなかったので、該当のソースコード欄の下に追記しました。
お手数ですがそちらを見ていただけたらと思います。

[m.ts10806]

質問に「何かしらのドメイン」を提示される場合はなるべく例示ドメインで提示してください。
https://ja.wikipedia.org/wiki/Example.com

[m.ts10806]

ちなみにコードブロックは任意数おけます
```言語名
コード
```

ですのでファイルが違ったり用が違うものであればブロックを別途設置してください。

[otn]

> このコメント内だとコードが正常に書けなかったので、

それがおかしいですね。見たままでない内容になっているんのでしょう。

[m.ts10806]

※検証用コメントです
<a href="aaaaaa.jpg"></a>
そのまま
<td><a href="https://hogehoge.net/282646/"><img src="https://hogehoge.net/image/282646/hoge.jpg" width="250" height="355" alt=""></a><br><span>hogeさん</span></td>

書き直し
<a href="https//example.com/1123/"><img src="https//example.com/1123/aaa.jpg"></a>

書き直し２
<a href="https://example.com/282646"><img src="https://example.com/image/282646/hoge.jpg"></a>

HTMLエスケープの入り方っぽいですね。いずれにしてもコメント欄の仕様で、質問本文にマークダウンで提示しようということで。

[退会済みユーザー]

>質問に「何かしらのドメイン」を提示される場合はなるべく例示ドメインで提示してください。
すみません、例示ドメインがよく分からずで・・・申し訳ありません。
>ちなみにコードブロックは任意数おけます
なるほど、ありがとうございます。
しかし今回は上記のコードが書かれているindex.php一つだけです。

>それがおかしいですね。見たままでない内容になっているんのでしょう。
ソースコード内のsrcに入っているURLをクリックしたら自社サイトに遷移し、画像は表示されるのを確認しています。
それと、上で変な風に表示されているコメントですが、編集ボタンを押すと正常に（該当のソースコード）に書いたように表示されます・・・

[m.ts10806]

>すみません、例示ドメインがよく分からずで・・・申し訳ありません。
リンク張ったとおり、ドメイン部分をexample.comに変更してください。

>しかし今回は上記のコードが書かれているindex.php一つだけです。
いえ、「該当部分のソースはこちらになります」で提示されているコードを別のコードブロックに分けてほしいだけです。
あくまでそちらは「ブラウザに表示されたHTML」なのでphpコードとは別枠です。

[退会済みユーザー]

ありがとうございます、お手数おかけしました、修正しました。

[m.ts10806]

あごめんなさい。私の検証コメントでミスってるばかりにスペルミスをそのままコピペさせてしまって・・・
example.com　です。
exapmleはexapmleで実在してしまうので（あせあせ

[kei344]

エラーは出ていませんか？デベロッパーツールで確認してみてください。https://eng-entrance.com/javascript-display-error

[退会済みユーザー]

>m.ts10806さん
わざわざすみません・・・！再度修正しました、ありがとうございます。

>エラーは出ていませんか？デベロッパーツールで確認してみてください。
デベロッパーツールを表示し、いろんなところを見てみましたが特にエラーのような物は確認出来ませんでした。
後今回ですが、JavaScriptは使っておりません。

[m.ts10806]

Chromeであれば「Console」の項目ですね。
要は画像などがちゃんと認識されないパスが指定されていると404NotFoundが出るのでその確認をしたいということになります

[kei344]

画像が読み込めない時に、その旨のエラー文が出ることがあります。読み込めない状態のときに確認してみてください。

[退会済みユーザー]

>Chromeであれば「Console」の項目ですね。
要は画像などがちゃんと認識されないパスが指定されていると404NotFoundが出るのでその確認をしたいということになります
console内は何も書かれておりませんでした。

[退会済みユーザー]

>画像が読み込めない時に、その旨のエラー文が出ることがあります。読み込めない状態のときに確認してみてください。
読み込めない状態の時に開いてみましたが、特にエラーはありませんでした。
console内も何も書かれておらず白紙です。

[kei344]

https://placehold.jp/24/cc9999/993333/350x150.png （ダミー画像生成サービスの画像です）のように外部のサービスの画像を指定した場合は表示できますか？

[退会済みユーザー]

>https://placehold.jp/24/cc9999/993333/350x150.png （ダミー画像生成サービスの画像です）のように外部のサービスの画像を指定した場合は表示できますか？
src内を上記のURLを指定した所、正常に表示されました。

Answer 1

他に考えられることとしては

自社サイトをスクレイピングし

サーバー側がURL直でのファイルへのアクセスを許可してないとかですかね。

毎回表示されないのであればキャッシュではない気がしますし・・

Comments

[kei344]

これな気がします。

[退会済みユーザー]

>サーバー側がURL直でのファイルへのアクセスを許可してない
その場合、一度別のタブで自社サイトの該当する画像があるページを開いた後だと画像が正常に表示されるものなのでしょうか？
現在の状況ですが、
1）上記コードを含むindex.phpを実行
2）タイトルやテーブルは表示されるが、画像のみ表示されない
3）一度自社サイトの該当画像があるページを開く
4）もう一度index.phpを実行すると画像が表示される
5）自社サイトの該当ページに更新があり、画像が変更、追加されるとまた画像が表示されなくなる
6）3の項目をもう一度する
7）正常に表示される

こんな感じです・・・

[m.ts10806]

>その場合、一度別のタブで自社サイトの該当する画像があるページを開いた後だと画像が正常に表示されるものなのでしょうか？

私はスクレイピングやらない人なので詳しいわけではないですが、
画像があるページを開いている＝サイト内アクセスなので表示される
（ここまではOK）
仮説ですが、同サーバー内で許可された状態で開いているのでスクレイピングコードからもアクセスできる・・・みたいな感じじゃないかなと。

念のためその自社サイトの.htaccessやサーバー側の設定で「deny from ～～」のような指定がされていないか確認してみてください。

Answer 2

ブラウザの開発画面で当該srcが読まれたときのエラーを確認ください
404なら参照先がおかしいのだと思います

Comments

[退会済みユーザー]

申し訳ありません、ブラウザの開発画面とはどういう事でしょうか・・・？
ブラウザ上ではエラーメッセージ等は表示されておりません。
（ソースを表示し、src内のURLをクリックすると自社サイトの画像は正常に表示されます。）

Answer 3

本当に、img の src のパスに間違いはありませんか？

https://hogehogehoge.jpg

という src はまず、ありません。
サーバのログを確認すると実際に検索している場所なりなんなりが出ているかと思います。

Comments

[退会済みユーザー]

すみません、書き方が雑でした・・・
imgタグ内には
<img src="https://hogehoge.net/image/1471719/hoge.jpg" width="250" height="355" alt="">
と入っております

[退会済みユーザー]

あれ、上手いことかけない・・・
&quot;の部分には実際は”(ダブルクォーテーション)になっています。

[showkit]

おそらくは、ウェブサーバの アクセスログに 404 なり、エラーログに img の file not found なりのログが出力されているはずです。それを確認するのが近道かと・・・。

[退会済みユーザー]

すみません、ウェブサーバーのアクセスログとは今回で言うとスクレイピング先の自社サイトの事でしょうか？
現在勉強中の身でして、そちらを確認することはちょっとむずかしいです、申し訳ありません。

[showkit]

スクレイピング先が、https://hogehoge.net/ であれば、その自社サイトのことになります。
勉強中のみであっても、php のソースを ウェブサーバに あげて実行しているんですよね？そうでなければ、この質問自体が ナンセンスな話になってしまいます。
ウェブサーバがどこにあって、何を使用しているかを認識していないと、そもそも、src を書く以前の話になりますので、まずは そこの確認を。