Q&A
>mi
Macのエディタですかね・・・（利用者じゃないのでピンときませんでした）
前提・実現したいこと
ローカルファイルを表示させたい
発生している問題・エラーメッセージ
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ー画像
各ファイルと位置関係が分かる図もご提示ください。
（質問は編集できます）
デスクトップーiSaraーhtml
｜ーcss
| ーjs
｜ーDownloadsー画像
このような書き方でいいでしょうか？
質問は編集できますので、質問を編集してご提示ください。
※ただし平で提示すると冒頭の空白は詰められるので、コードブロック使ってください
追記された「html」はフォルダですか？ファイルですか？
↓のようになっているのか
├html─index.html
├css
├js
├Downloads─isaralogo-1.png
↓のようになっているのか どちらでしょう？
├index.html
├css
├js
├Downloads─isaralogo-1.png
後者の方になっています。
回答にも書きました通り
Not allowed to load local resource:
は読み込みが許可されていないというエラーになるのですが
：以降は何も出力されていないのでしょうか？
Not allowed to load local resource: file:///Users/ユーザー名/Desktop/Downloads/actuallyfree.jpg
このように出力されました。
直接解決にはつながらない内容ですが、２点ほど。
まず、ユーザ名がそのまま記載されていますので、意図したものでなければコメント欄、質問本文を修正したほうが良いと思われます。
もう１点、<div class="header-left">の中身を書いていただいたようなのですが
エラー文で指定されている actuallyfree.jpgがコード内に見当たりません。
このdivより前（上部）で上記ファイルを指定していませんか？
パスの指定がそもそもズレていることに気付きませんでした。
mts10806さんの回答の通り、この指定だとデスクトップ直下にDownloadsがあるような指定になっていますね。
申し訳ありません。
申し訳ありません！
違うエラーを記載していました！
Not allowed to load local resource: file:///Users/ユーザー名/Desktop/Downloads/isaralogo-1.png
正しくはこちらです。
mts10806さんの回答の通り、パスの記述を変更してみてください。
ただ、指定が間違っているのであればエラー出力なしで画像が表示されるはずの位置に×が表示されるのが正常な動作だったような気が…。
私も気にはなってますが、パス間違いなら出るとしたら404ですね。
あと・・・お名前っぽいのがパスに入ってますが大丈夫ですか？
全世界から閲覧可能なのでもしダメならコメント編集されたほうが。
質問や回答だと履歴が誰でも見れるので運営に削除してもらうしかないですが。
画像の場所が空白になっていて、要素の詳細を見ると先ほどのエラーが出ていました。
色々調べてはみたのですがわからず、自分でも現状をよく理解しておらず申し訳ありません。
質問については削除してもらおうと思います。
皆さんのご指摘通りに直したところ、無事に表示させることができました！
たくさんの迷惑をおかけしてしまい、申し訳ありませんでした。
本当にありがとうございました！
質問の削除については、お問い合わせしています。
2019/07/17 15:47
のコメントも念のため編集されたほうがよろしいかと思います。
以前、別の方で同じようなことをアドバイスしたところ、既に解決となる回答がついていたことから運営から適当な文字列に入れ替える代替案が出されたようで実際に対応されたので、
その方向で問い合わせてみると良いかもしれません。
アドバイスありがとうございます！
とても助かります！
落ち着いたらベストアンサーを選び解決済みとしておいてください。
了解しました。
回答2件
0
ベストアンサー
├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 = "">
投稿2019/07/17 06:38
編集2019/07/17 07:41総合スコア80888
0
iSara下に存在する「html」がフォルダでないならパスの指定に問題はありません。
mts10806さんの回答を見て気づきましたが、指定の位置もおかしいですね。すみません。
表示されているエラーメッセージ 「Not allowed to load local resource:」は
ローカルリソース（質問者様のPC内のファイル）の読み込みが許可されていないということになります。
ローカルのファイルをHTML上で表示させたい
のように、画像の取得方法が原因の場合もあるため
業務で作成しているものでないのであれば、html全体を記載したほうが解決に近づくかと。
投稿2019/07/17 06:24
編集2019/07/17 06:44総合スコア419
あなたの回答
tips
プレビュー
