Monaca Helloテンプレートでの画像の読み込み

Question

Monacaで制作しているアプリで画像を表示させたいと考えています。

プロジェクトはHelloテンプレートを利用しています。

www/images/sample.jpgに画像を保存し、

<img src="www/imges/sample.jpg">

のように設定したのですが、画像が読み込めていないようです。
web制作に関して初心者でして、ファイルの指定方法が間違っているのかもしれません。

上記の時点で間違っている箇所があれば教えていただきたいです。
また、Helloテンプレートでの画像の読み込み方法をご存知の方がいればご教授いたします。

よろしくお願いいたします。

Answer 1

Webからアクセスしたときのトップのフォルダ（ルートフォルダ・ドキュメントルートといいます）はどこでしょうか？

http://example.com/ でアクセスしたときに/www/index.htmlが参照されているのでしたら、画像も /www/を/としてアクセスしなければなりません。
**「ブラウザから参照できるパス」**にする必要があるからです。

つまり下記のようなURLでアクセスして画像が表示されるか？を確認する必要があります。
http://example.com/www/images/sample.jpg

もし↑ではアクセスできず下記のようなURLでアクセスできるのでしたら
http://example.com/images/sample.jpg

HTMLに書くべきパスは
/images/sample.jpg となります。

「画像が表示されない」「CSSがあたっていない」「外部ファイルのJavaScriptが動かない」で確認する第一歩が「ブラウザからURLを直に打って実行して正しく表示されるか」です。
※GoogleChromeなどは「ソースを表示」するとリンクになっているので確認しやすいです

また既に指摘されていますが、

<img src="www/imges/sample.jpg">

「www/images/sample.jpgに画像を保存」であればスペルミスが起きていますね。
可能ならパス・ファイル名含めてコピペされたほうが確実です。

また、www/image/のような最初に/がないもの、または./www/image/のように./のような始まりとなっているものは「その記述が書かれたファイルからの相対パス」を参照しようとます。
実際にその記述が書かれていてブラウザから表示されるファイルがindex.htmlとしたら/index.htmlにあることになります（wwwと同じ階層）
階層は重々ご確認のうえ、指定してください。
/から始まっていると「ルートディレクトリからの絶対パス」という指定になりますので、指定したいファイルのパスだけを考えればよくなり、
「今どのファイルから参照している？｣を考える必要がなくなるので、間違いが減ります。

• これだけは覚えておきたい！絶対パスと相対パスの違いとは【初心者向け】

Answer 2

こういうフォルダ構成だと思いますので
<img src="images/sample.jpg">かな

※imgesのスペルミスも気をつけてください