質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.37%

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

受付中

回答 3

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 752
退会済みユーザー

退会済みユーザー

前提・実現したいこと

勉強のため自社サイトをスクレイピングし、テーブルに表示するプログラムを書いています。
スクレイピングにて取得した画像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が入っているのは確認済みです。
説明が下手で申し訳ありませんが、原因を教えていただけると助かります。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • 退会済みユーザー

    退会済みユーザー

    2019/08/26 14:15

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

    キャンセル

  • kei344

    2019/08/26 14:18

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

    キャンセル

  • 退会済みユーザー

    退会済みユーザー

    2019/08/26 14:26

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

    キャンセル

回答 3

+2

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

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

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

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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/08/26 14:20

    これな気がします。

    キャンセル

  • 2019/08/26 14:21

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

    こんな感じです・・・

    キャンセル

  • 2019/08/26 14:31

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

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

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

    キャンセル

+1

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

https://hogehogehoge.jpg


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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/08/26 13:58

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

    キャンセル

  • 2019/08/26 14:04

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

    キャンセル

  • 2019/08/26 14:23

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

    キャンセル

+1

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/08/26 13:41

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

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.37%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る