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

  関連記事

Facebookで、自分の過去の投稿を探したい場合

え~、、っと、あの記事はたしかFacebookで投稿したはず。 あの時の写真を使いたい、あの時にリン ≫続きを読む

【Q】携帯サイトを初めて作ることになりました。まず何からやれば?どこで勉強したらいいですか?

携帯(ガラケー)サイトの作り方なんてもう不要な技術なのかもしれませんが、自分でも、この記事の中身をも ≫続きを読む

千畳敷カールで2612体験してきました

10月3日、下界はまだ夏のなごりが残る初秋。この日、中央アルプス駒ケ岳ロープウェイにのって、2612 ≫続きを読む

時間の計算をしたい時に・・・

ちょっとしたメモです。 数字が弱いわたしは、13時35分から1時間半で・・・と言われてもすぐに 何時 ≫続きを読む

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

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

【Q】ブログを使ったSEO対策があると聞きました。具体的にどうすればいいですか?

ブログを使ったSEO対策  以前は、被リンクを貰う方法と言えば、「相互リンク集」の作成が主流でした。 ≫続きを読む

環境設定ファイル

備忘録ですが、PCの引っ越しをしたり、いつもと違うパソコンで仕事をするときに、効率化が悪くなるのが、 ≫続きを読む

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

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

【ホームページの作り方】ネットショップの作成

ネットショップには、ショッピングカート、商品管理、会員機能、決済処理など、いくつかの必要な機能があり ≫続きを読む

古いバージョンのWordPressサイトを、新しいバージョンに上げ、データベースを移転する方法のメモ

サーバーの引っ越し。こまごまといろいろやらなければ行けないことがあって、よく手順を間違えたりしてロス ≫続きを読む

▲ページ先頭へ