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

  関連記事

no image
TinyMCEにスタイルを追加する

自分への備忘録なので丁寧な記事ではなくてすみません。 function.phpに下記を追加 /**  ≫続きを読む

【Q】キーワードの選び方を教えてください。

キーワードについて理解することで、SEO対策の効果がぐんとあがります。遠回りに見えるかもしれないけど ≫続きを読む

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

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

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

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

【Q】ウィルスに感染したために、サイトが改ざんされたというニュースを読んで不安です

「××社のホームページが改ざんされ訪れた人にウィルス感染の危険」こんな言葉でニュースになっているので ≫続きを読む

ウィンドウズノートパソコンをお譲りしますというチラシ

こんなチラシが入っていて 販売するのに有償譲渡会って書いてあるのがまず怪しい 町の公共施設を使うこと ≫続きを読む

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

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

【Q】ホームページのバックアップってどうすればいいですか?

バックアップについてお話する前に、ホームページには2種類あることを復習しますね。 1つは静的に作られ ≫続きを読む

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

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

【Q】ネットショップには「ランディングページが大事」と聞きました。ランディングページって何ですか?

まずはランディングページ、見てみてください。こんなページのことです。ランディングページのリンク集 テ ≫続きを読む

▲ページ先頭へ