Q&A
× ../Image/Dog.jpg
○ ./Image/Dog.jpg
では？
## やりたいこと
safariブラウザでのプレビューにて、<img src="../Image/Dog.jpg" alt="犬の代替テキスト">を表示させたいです。
?になってしまう。
## コード
swift
1<html lang="en"> 2 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>Document Title</title> 7</head> 8 9<body> 10 <img src="../Image/Dog.jpg" alt="犬の代替テキスト"> 11</body> 12 13</html>
質問は以上です。
お時間あるときに、ご返信頂けましたら幸いです????
#追記
altが表示されるのみで、画像が表示されません..
基本的な確認です
表示させている.html
Imageフォルダ
Dog.jpg
このような構成ではないのですね？
ではどのような構成の位置にDog.jpgの画像はありますか？
Image > Dog.jpg
Sample > .html という構造です。
Sampleフォルダ等を記述しなければならないのでしょうか..？
そうですかそれなら
../Image/Dog.jpg
が正解なのですが、URL上ファイルがありませんとなっています。
文字は半角で入力されているか？
大文字小文字の違いが無いか？
再度確認してみて下さい
ご返信ありがとうございます。
ですが、リンクを間違えた場合は alt が表示され、正しい場合は「？」が表示されます。
尚、その「？」を別タグでは表示可能なのでファイル損失でもない気がします。
解決策がわかれば、ご返信ください。
パスが問題かどうかを判断するために、提示されたHTMLファイルと同じフォルダー(Sample)に画像をコピーして、
<img src="Dog.jpg" alt="犬の代替テキスト">
のように、URLにファイル名だけ指定します。これでページに画像が表示されれば、パスの指定に問題がありますし、これでも画像が表示されなければ別の問題(たとえば、拡張子がjpgなのに実際はPNG形式だとか)があります。
直接その画像ファイルのURLをブラウザ上で実行してみて下さい。
> 提示されたHTMLファイルと同じフォルダー(Sample)に画像をコピーして、
無事表示されました！
ですが、パスのどこに問題があったのでしょうか..?
一応FInderの スクショを質問欄に追記しました。
ないと思うけど
Imageじゃなくて
lmageってことないよね？
FinderでDog.jpgをクリックした状態で、Cmd+Option+cキーでフルパスを取得し、編集中のHTMLファイルのsrc=""のURLとして貼り付け、先頭から問題のImage? lmage? の直前の/までを「../」に書き換えてみれば、現在使っているフォルダー名で指定できますね。
<div>
<img src="/Users/matsumotokazuki/Downloads/Image/Dog.jpg" alt="犬の画像">
</div>
- フルパスで実行すると、「？」が出ました。
- パス自体をCmd + クリックすると、「イメージの読み込み中にエラーが発生しました」
- "../Image/Dog.jpg" としましたが、引き続き「？」が出ました。
解決策がわかれば、ご返信ください。
> Imageじゃなくて
lmageってことないよね？
> 問題のImage? lmage?
とは何でしょうか
ローカル環境でしょ？まず普通にソフトでDog.jpgは開けるんですよね？
あとはImageのアクセス権限なんだけどふつう変えなければ大丈夫だから
再度Imageフォルダ作り直して試してみて！
ありえないと思ったけど
Image? lmage?
I（アイ）l（エル）のスペルミスの可能性の話
ただurlだと小文字にそろえることが多くて
この場合"image"としています。
それは、画像から確認できるFinderのフォントが、I(大文字アイ)とl(小文字エル)の区別が付かないものだったので、イメージ(Image)と付けるつもりでLMAGEをすべて小文字にしたフォルダー名を付けたのではないか、という疑問ね。
その後、画像のフルパスが明らかになったので、それは見当違いだったことが明らかになった。
あとは、ImageフォルダーやDog.jpgのアクセス権限くらいか?
ご返信下さりありがとうございます。
引き続きこちらでも試してみます....
- 普通にソフトでDog.jpgは開けます
- 自分で撮った写真画像なのでアクセス権限は大丈夫そうです。
- imageにして、フォルダ作り直しましたが、「？」です..
umm..????
A. SampleフォルダーとImageフォルダーをDownloadフォルダーの下から、別の場所に移動してからブラウザーで表示してみる。
B. Sampleフォルダーの中にImageフォルダーを移動して、src="Image/Dog.jpg"と変更してからブラウザーで表示してみる。
整理しましょう
先ほど他の方から指示があった方法で試して
× /Users/matsumotokazuki/Downloads/Image/Dog.jpg
○? /Users/matsumotokazuki/Downloads/Dog.jpg
× /Users/matsumotokazuki/Downloads/image/Dog.jpg
でよろしいでしょうか？
いえ、
× /Users/matsumotokazuki/Downloads/Dog.jpg
○ /Users/matsumotokazuki/Downloads/sample/Dog.jpg なら、無事に表示されます。
> Daregada様
A. よく分からなかったのですが、デスクトップに移してから再度Downloadに戻して実行 -> 表示されず。
B. 表示されました
あとはimgフォルダを作ってそこにDog.jpgをコピーして
sample/hello.htmlをsrc="../img/Dog.jpg"に変更して試す。
"../img/Dog.jpg" ではsafariブラウザに表示されませんでした。
尚、Cmd + クリックすると 正常にVscode内で表示されます。
先程と同様です。
safari古いんで持っていないんですが
一部のURLをブロックする機能が動いているのかな？
もしかしてhello.htmlをdownloadsにコピーして"./Image/Dog.jpg"でみれます？
※スペルミスしていました。
> A. よく分からなかったのですが、デスクトップに移してから再度Downloadに戻して実行 -> 表示されず。
いやいや、戻したら同じでしょう。デスクトップでもどこでもいいのですが、DownloadではないフォルダーにSampleとImageを移動(コピーでもok)して、そちらのHTMLファイルをブラウザーで表示してください。
因みにchromeブラウザで試したところ、画像が表示されました。
safariに原因があるのでしょうか
回答には書いたんだけど、safariだと
「ローカル環境化でのhtmlファイルアクセス制限ルール」が適用されるみたい。
(safariってwindows版2012年10月23日に廃止になっている)
残っているのMac版だけなのでHTML勉強するには不向きだよ。
回答3件
0
多分ローカル環境化でのhtmlファイルアクセス制限ルールが適応されています。
ルールとしては
「実行.htmlから参照するファイルは実行.html以下のルートでなくてはいけない。」
となり
今回の
[Sample]フォルダ 実行A.html [image]フォルダ Doc.jpg
の場合以下のルートではないのでNG
この様な
実行B.html [image]フォルダ Doc.jpg
の場合以下のルートなのでOK
となります。
投稿2020/09/27 15:30
総合スコア2506
0
単純にそのフォルダやファイルがないだけでしょう
safariの環境がないので確かめられませんが、開発モードがあれば
ネットワークで404エラーがでていませんか？
投稿2020/09/27 13:39
総合スコア116724
0
自己解決
皆様ご協力ありがとうございました。
safari, Chrome 両ブラウザで正常に画像が表示されましたので解決と致します。
- Vscodeを再起動したら治った。
../でなく、./Dog.jpgだと上の階層も表示できた。
再起動する前後の違いとしては、VScode左側のナビゲーションエリアにimgフォルダやDog.jpgファイルの表示が無かった事が挙げられます。
また、上位階層への参照は./を使用しようと思います。
(Chromeは../・./双方で表示可だが、safariは./のみ)
投稿2020/09/27 23:20
編集2020/09/27 23:32総合スコア147
> 上位階層への参照は./を使用しよう
誤解です。
それは下位階層に対する処理です
あなたの回答
tips
プレビュー
