ローカルファイルを表示させたい

前提・実現したいこと

ローカルファイルを表示させたい

発生している問題・エラーメッセージ

iSaraさんのLPサイトをサイト模写したのですが、新規ファイルにhtmlやcssをまとめたら画像が表示されなくなってしまいました。プログラミングやパソコン自体初心者なのでうまく説明できず申し訳ありません。

Not allowed to load local resource: file:///Users/ユーザー名/Desktop/Downloads/isaralogo-1.png

該当のソースコード

html
1<div class="header-left">
2			<img src = "../Downloads/isaralogo-1.png" width = "258" height = "90" alt = "">
3			<h1>バンコクのノマドエンジニア育成講座</h1>
4		</div>
5			<div class="smartphone-header-left">
6			<h1>バンコクのノマドエンジニア育成講座</h1><br>
7			<img src = "../Downloads/isaralogo-1.png" width = "258" height = "90" alt = "">
8		    </div>
9			<div class="smartphone-header-right start-point" href="start-point">
10			<i class="far fa-sticky-note"></i>
11			<p>資料請求</p>
12			</div>

試したこと

画像やファイルの保存場所を変えてみましたが表示されませんでした。

補足情報（FW/ツールのバージョンなど）

使っているのはmiです。

デスクトップーiSaraーhtml
                 ｜ーcss
                 ｜ーjs
　　　　　　　　　　｜ーDownloadsー画像

m.ts10806

2019/07/17 05:50

>mi Macのエディタですかね・・・（利用者じゃないのでピンときませんでした）

m.ts10806

2019/07/17 05:51

各ファイルと位置関係が分かる図もご提示ください。（質問は編集できます）

yuto1341

2019/07/17 06:07 編集

デスクトップーiSaraーhtml ｜ーcss | ーjs 　　　　　　　　｜ーDownloadsー画像このような書き方でいいでしょうか？

m.ts10806

2019/07/17 06:07

質問は編集できますので、質問を編集してご提示ください。 ※ただし平で提示すると冒頭の空白は詰められるので、コードブロック使ってください

m.ts10806

2019/07/17 06:16

追記された「html」はフォルダですか？ファイルですか？ ↓のようになっているのか ├html─index.html ├css ├js ├Downloads─isaralogo-1.png ↓のようになっているのか　どちらでしょう？ ├index.html ├css ├js ├Downloads─isaralogo-1.png

yuto1341

2019/07/17 06:20

後者の方になっています。

tetutetu

2019/07/17 06:28

回答にも書きました通り Not allowed to load local resource: は読み込みが許可されていないというエラーになるのですが：以降は何も出力されていないのでしょうか？

yuto1341

2019/07/17 06:42 編集

Not allowed to load local resource: file:///Users/ユーザー名/Desktop/Downloads/actuallyfree.jpg このように出力されました。

tetutetu

2019/07/17 06:41

直接解決にはつながらない内容ですが、２点ほど。まず、ユーザ名がそのまま記載されていますので、意図したものでなければコメント欄、質問本文を修正したほうが良いと思われます。もう１点、<div class="header-left">の中身を書いていただいたようなのですがエラー文で指定されている　actuallyfree.jpgがコード内に見当たりません。このdivより前（上部）で上記ファイルを指定していませんか？

tetutetu

2019/07/17 06:46

パスの指定がそもそもズレていることに気付きませんでした。 mts10806さんの回答の通り、この指定だとデスクトップ直下にDownloadsがあるような指定になっていますね。申し訳ありません。

yuto1341

2019/07/17 07:35 編集

申し訳ありません！違うエラーを記載していました！ Not allowed to load local resource: file:///Users/ユーザー名/Desktop/Downloads/isaralogo-1.png 正しくはこちらです。

tetutetu

2019/07/17 06:51

mts10806さんの回答の通り、パスの記述を変更してみてください。ただ、指定が間違っているのであればエラー出力なしで画像が表示されるはずの位置に×が表示されるのが正常な動作だったような気が…。

m.ts10806

2019/07/17 06:58

私も気にはなってますが、パス間違いなら出るとしたら404ですね。

m.ts10806

2019/07/17 06:59

あと・・・お名前っぽいのがパスに入ってますが大丈夫ですか？全世界から閲覧可能なのでもしダメならコメント編集されたほうが。質問や回答だと履歴が誰でも見れるので運営に削除してもらうしかないですが。

yuto1341

2019/07/17 07:06

画像の場所が空白になっていて、要素の詳細を見ると先ほどのエラーが出ていました。色々調べてはみたのですがわからず、自分でも現状をよく理解しておらず申し訳ありません。質問については削除してもらおうと思います。

yuto1341

2019/07/17 07:28

皆さんのご指摘通りに直したところ、無事に表示させることができました！たくさんの迷惑をおかけしてしまい、申し訳ありませんでした。本当にありがとうございました！質問の削除については、お問い合わせしています。

m.ts10806

2019/07/17 07:31 編集

2019/07/17 15:47 のコメントも念のため編集されたほうがよろしいかと思います。

m.ts10806

2019/07/17 07:32 編集

以前、別の方で同じようなことをアドバイスしたところ、既に解決となる回答がついていたことから運営から適当な文字列に入れ替える代替案が出されたようで実際に対応されたので、その方向で問い合わせてみると良いかもしれません。

yuto1341

2019/07/17 07:34

アドバイスありがとうございます！とても助かります！

m.ts10806

2019/07/17 07:40

落ち着いたらベストアンサーを選び解決済みとしておいてください。

yuto1341

2019/07/17 07:43

了解しました。

行動規範の内容に同意します

回答2件

ベストアンサー

├index.html
├css
├js
├Downloads─isaralogo-1.png

となっているのでしたら

<img src = "../Downloads/isaralogo-1.png" width = "258" height = "90" alt = "">

はここを参照しに行きます。

├Downloads─isaralogo-1.png　←ここ
├┐
 ├index.html
 ├css
 ├js
 ├Downloads─isaralogo-1.png

現在の構成のまま相対パスで書くなら下記のいずれかですね。

html
1１：
2<img src = "./Downloads/isaralogo-1.png" width = "258" height = "90" alt = "">
3
4２：
5<img src = "Downloads/isaralogo-1.png" width = "258" height = "90" alt = "">