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

  関連記事

覚えてもらえるお店になること・・・

webの森は信州EC実践会という、ウェブマーケティングの勉強会を主催していまして、たくさんのネット店 ≫続きを読む

【飯田開催】水上浩一ネットショップ売上げアップセミナー 令和元年11月18日

水上先生のセミナーを企画しましたので、ご案内します。 売上ゼロ円からのネットショップ、売れない原因と ≫続きを読む

信州EC実践会・飯田 水上浩一出版記念セミナー H31年1月28日

SEOに強い!ネットショップの教科書 信州EC実践会の水上浩一講師の新刊「SEOに強い!ネットショッ ≫続きを読む

【Q】わたしのネットショップ、写真が良くないと言われたのですが・・・。

よく言われることですが、「ネットショップは写真が命」 買う人は手にとって見ることができない、匂いを嗅 ≫続きを読む

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

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

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

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

環境設定ファイル

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

illustratorでキャラクターに色を塗る方法

illustratorで、キャラクターに色を塗る方法を紹介します。 1)線でイラストを描きます。後ろ ≫続きを読む

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

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

メールの反応がない方・・

例えば今期になってから、新しくお仕事をご依頼されたりお客様になっていただいて、新しく知り合った方が6 ≫続きを読む

▲ページ先頭へ