Adobe XDのデザインスペックからダウンロードした画像がウェブ上で表示されません

Question

初めまして。今現在、コーディングの指導をしてもらっています。課題でAdobe XDのデザインスペックを渡されて、私が同じ様にアートボードで作成して、その後エディタでコーディングする内容です。

現在、アートボードは合格しエディタでコーディングをしていますが、渡されたデザインスペックから画像をダウンロードしたものをhtml内で記入しても、読み取り専用になっておりウェブ上で読み込みされません。

自分では、ファイルのプロパティから読み取り専用のチェックボックスを外して再度読み込ませましたが、何故か読み取り専用のままです。
そもそも、読み取り専用となっているのが原因なのかも分かっておりません。

ダウンロードした画像は2つあり、1つはcssでbackground-imageで普通に使えました。
使えない画像は、htmlでimgタグで挿入したいものです。

Adobe XDの使用がまだ2日目で不慣れです。もしかしたら凄く初歩的なことかもしれないです。　
指導者は返信が遅く今から聞いても恐らく明日返信になると思うためこちらで質問させてもらいました。気になって仕方がないです。

Comments

[runnynose]

デベロッパーツール開いたときにエラー等出てませんかね？？
あればその情報も記載していただきたく????‍♂️

[aaaaakcha]

GET file:///E:/web%E5%88%B6%E4%BD%9C%E5%AE%9F%E8%B7%B5%E8%AA%B2%E9%A1%8C3/images/XX.png net::ERR_FILE_NOT_FOUND

このようにエラーがでています。よろしくお願いします。

[runnynose]

ぜひその情報を質問欄へ記載してくださいませm(__)m

Answer 1

GET > file:///E:/web%E5%88%B6%E4%BD%9C%E5%AE%9F%E8%B7%B5%E8%AA%B2%E9%A1%8C3/images/yEVqXX.png net::ERR_FILE_NOT_FOUND

エラー内容から察するに、ファイルパスがあっていないため画像のリンク切れが起こっているのだと思います。

また、file://から始まるURLはローカルPCへのアクセスになるため、Webサイトを作成する上で一般的な記述ではありません。

相対パス、もしくは絶対パス(ルート相対パス)で画像を指定することをお勧めします。
参考：https://fastcoding.jp/blog/all/frontend/path/

Comments

[aaaaakcha]

解決しました。
cssのなかにimagesのフォルダを入れていたのに、images/ から書き始めていました。
本当にありがとうございました。

[runnynose]

????