画像が表示されないと困ったら(HTML初心者の方へ)

   web入門, ホームページの作り方| 

「画像が表示されません!どうして???」
HTML初心者の方によく質問をされるんですが、いくつか理由があると思いますが、
一番理由で多いと思われる「ファイルへのパスが合ってない」という件について、なるべくわかりやすく図で解説してみたいと思います。

下記の図は、HTMLファイルと画像が同じ場所(同じ階層)にある場合。

pass001 (1)

ndex.htmlとspring.jpgは同じ階層なので、imgのタグは(画像ファイルへのパスは)
<img src=”spring.jpg” width=”250″ height=”166″ alt=”リス” />
になっています。
同じ階層ってどういう意味?という方は下記をみてください。

pass002 (1)

次に、画像が、imageフォルダの中に入っている場合です。

pass003 (1)

ndex.htmlとspring.jpgは同じ階層ではなく、imageフォルダの中にspring.jpgが入っているので、imgのタグは(画像ファイルへのパスは)
<img src=”image/spring.jpg” width=”250″ height=”166″ alt=”リス” />
となります。

エクスプローラーでみてみると

pass004 (1)

こうなっています。

ここをミスしていると、ブラウザでプレビューされても画像が×になってしまいどうして???となってしまいます。

ドリームウィーバーCS4を使って、画像を挿入する方法と、画像パスのリンク切れを防ぐ方法を動画マニュアルで紹介してますので、興味のある方はこちらもみてみてください。

pass005 (1)

初めてDreamweaverを使う [3] 画像の挿入
初めてDreamweaverを使う [4] 画像のパス

ほかにいくつか、画像が表示されない場合の原因を出しておきますね。

  • ファイル名に日本語を使ってないか?
  • gifかjpgで保存しているか?(PNGでも表示できますが、今回はその話は割愛)
  • CMYKで保存してないか?(RGBになっているか?)
  • 画像を保存した場所は、サイトの中か?(サイト定義の中)
  • HTMLファイルから、画像へのパスは合っているか?
  • サーバにアップロードしたときに、画像だけを転送し忘れていないか?
  • 画像だけアップして、HTMLの方をアップし忘れていないか?
  • キャッシュを見ているだけで、更新ボタンを押したら表示されるということもあるようです。

   web入門, ホームページの作り方| 

  関連記事

WordPressにPDFやWord、Excelを添付する方法

当たり前のことかもしれませんが、質問がありましたのでこちらで紹介します。 WordPressのメディ ≫続きを読む

グーグルアナリティクスGA4への切り替え

来年7月1日からGoogle Analytics4への移行があるということで、まだ未設定の場合は下記 ≫続きを読む

不労所得って悪いことなの?資産の運用なら全然OKだし勉強するべき

ビットコインって何?危ないんじゃない?そんなことに手を出したら・・・・ ビットコインとか暗号資産の話 ≫続きを読む

no image
[リクルートID]定期ニュースの停止

[リクルートID]定期ニュースの停止ができずイライラマックス!   ポンパレで一度買い物しただけなの ≫続きを読む

窓が見つからない (Windowsのプログラムがどこかに行ってしまった時)

ソフトを立ち上げて、タスクバーにはたしかにそのソフトがあるのに、デスクトップ上のどこにもない!ない! ≫続きを読む

件名:Document2 というメールは開かないで削除 メールの受信がストップする場合もあるようです

「件名:Document2」というメールが送られてきた場合、メールを開かずに削除してください。このメ ≫続きを読む

Lightboxが動かない場合はこれを試して

久々にLightboxを使おうとしたら、何故か動かなくてはまってしまったので、メモしておきます。 1 ≫続きを読む

facebookページの更新だけではもったいない

HTMLやcssの講習をした生徒さんが、ネットショップのオープンに向けてがんばってます。 こだわりの ≫続きを読む

【Q】ホームページでネットショップをやっています。ツイッターをやったほうがいいよと知人に誘われたのですが何がいいのかいまいちわからないのですが?

ツイッターってなに? 140文字の「つぶやき」を投 稿するだけのシンプルな webサービスです。 無 ≫続きを読む

エックスサーバーでWEBフォントの提供開始

私が愛用しているエックスサーバー http://www.xserver.ne.jp/ で、ウェブフォ ≫続きを読む

▲ページ先頭へ