画像が表示されないと困ったら(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入門, ホームページの作り方| 

  関連記事

【Q】SEO対策しませんか?という電話がありました。どこで調べたのか私の個人情報も結構知っていて不安です。

●●グループから電話がかかってきましたか? しつこい営業でけっこう悪名高いところなので無視していただ ≫続きを読む

【Q】ネットショップが完成しました、これから何をしていけば良いでしょうか

たくさんの労力・時間をかけてやっとオープンしたネットショップ。 webの森にリニューアルをご依頼いた ≫続きを読む

フォトショップでバウンディングボックスを自動表示

これ・・・意外と便利なのに、初期設定ではそうなってないので知らずに使っている人が多いかもしれません。 ≫続きを読む

【Q】ブログとfacebookページ、両方更新するのがしんどいです。どちらに力を入れたら良いですか?

先日友人から「うちのホームページ、全然人が見に来ないみたいで問い合わせもないしどうすれば?」と相談を ≫続きを読む

【Q】サーバーとかドメインとか言われてもよくわからないのですが・・・

webの森では、サイト制作をご依頼したお客様に、毎回サーバーとドメインの管理を今後どうするかをお聞き ≫続きを読む

【Q】ホームページをCMSにするとSEO対策に不利と聞きましたが・・・・。普通のHTMLで作って置いた方がいいんでしょうか?

「アドレスがhtmlじゃなくなると検索に不利なのでは・・?」「CMSで作った動的ページはSEOで不利 ≫続きを読む

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

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

【Q】リアル店舗もってるネットショップは、Googleマイビジネス(マップ)の登録が必須だと聞きました。どうすればいいのでしょう?

地域名 + サービス名で検索してみてください まずは試してみてください。Googleで「駒ヶ根市 税 ≫続きを読む

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

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

質問:迷惑メールが多くて困っています

私がお客様からいただく相談メールでかなり多いのがこの質問です。 ドメインで作った大事なメール、お客様 ≫続きを読む

▲ページ先頭へ