投稿2021/12/11 05:46
編集2021/12/18 06:37表題の通り、前にも起こったのですが、一部の画像が表示されなくなります。
私は、パスを間違えないように自動的に入力できるプラグインを使っています。
なので、vscodeでそれ通り記述しています。
今回、前にも起こったことがあるため、
原因追及のため、」ここで質問しました
原因追及：相対パスが原因でした
scss:(../../img~)→ SCSSフォルダーがさらに3つのフォルダーに分かれているため、左記の表記です
css：自動的に../../img表示。これをimgフォルダーでも分類していないため、相互で不釣り合いの相対パスになるという認識で間違えないでしょうか？
この仮説が正しいとすると、フォルダー構成を考えていかないといけないため、ご教授お願い致します。
前提:SCssで書いています。
ファイル構造は下記です
background-img：；URL ();の時に起こります
・確認
改めて、パスが間違えていないかを確認しました。自動的に入力できるプラグイン通りにしています。
余分な「../」もないです。
HTML
1<!DOCTYPE html> 2<html> 3<head> 4 <title></title> 5<link href="./css/style.css" rel="stylesheet"> 6</head> 7<body> 8 <section class="access"> 9 <div class="ineer"> 10 <div class="sec-theme aos-init aos-animate" data-aos="zoom-in"> 11 <img alt="ロゴ" src="./img/logo02.png"> 12 <p class="cmn-ttl">アクセス</p><!-- /.cmn-ttl --> 13 </div><!-- /.sec-theme --> 14 <div class="access-flex"> 15 <img alt="access" class="aos-init aos-animate" data-aos="fade-right" src="./img/acess.jpg"> 16 <div class="access-txt aos-init aos-animate" data-aos="fade-left"> 17 <div class="access-desc"> 18 <p class="extra-bold">住所</p> 19 <p>〒000-0000<br> 20 山形県鶴岡市xxxxxxxxxx</p> 21 <p class="extra-bold">TEL/FAX</p> 22 <p>000-0000-0000/00-0000-0000</p> 23 </div><!-- /.access-desc --> 24 <div class="access-sale"> 25 <p class="extra-bold">営業時間</p> 26 <p>14:00-23:00</p> 27 <p>＊4名以上のご予約の場合は、最寄り駅の「鶴岡駅」より送迎が可能ですので、 ご連絡ください。</p> 28 </div><!-- /.access-sale --> 29 </div><!-- /.access-txt --> 30 </div><!-- /.access-flex --> 31 <!-- <div class="accsess-map-inner"> --> 32 <div class="map"> 33 <iframe allowfullscreen height="450" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d24933.858417388372!2d139.58105087468056!3d38.63203904518239!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x5f8c6dbd6c03ae15%3A0x10bc5da99bc816ef!2z44CSOTk5LTcyMDUg5bGx5b2i55yM6ba05bKh5biC5rip5rW3!5e0!3m2!1sja!2sjp!4v1631286921047!5m2!1sja!2sjp" style="border:0;" width="600"></iframe> 34 </div><!-- /#map --> 35 <!-- </div>/.accsess-map-inner --> 36 </div> 37 </section><!-- /.acsess --> 38</body> 39</html>
ディレクトリー構図の共有です。よろしくお願いいたします。
coding2
├── css
│ ├──style.css
│ ├──destyle.css
│
│
├── scss
│ ├── layout
│ └── foundation
│ └── content
│ └──access.scss
├──img
├── bg-japanese-paper.png
下記にフォルダー添付します。ご教授頂けると幸いです。
何卒よろしくお願いいたします。(__)
FTPソフトはFilezillaのことを指いています。
ローカルではきちんと保存されています。
画像2は、background-imgの相対パスと左の状況を示しています。
相対パスは正しいですが(画像3を見ればわかります)、非表示です。「../../」→「./../」に変更することでgoogle
ツール上では見れます。ここに違和感とfilezillaを使って、何回やってもできないため、質問しています。
本当にいろいろ試していますが、できないです。↓
1
googleツールで見るとエラー：「Failed to load resource: the server responded with a status of 404 ()」です。
いろいろ調べると、サーバーを通して画像が表示されないような記事が見つかり、こちらを参考に「img/」の後ろに
「#{@user.id}.jpg,png」を書いてますが、こちらも表示できませんでした。
※しかし、「#{@user.id}.jpg,png」を書いたところは
「Failed to load resource: the server responded with a status of 404 」は消えましたが、結論、反映されません。
2.filezillaを自動選択設定にして、修正→できない
根本的に何が原因でどんな改善策があるのか、ここまでしてできないとわからないです。ご教授お願い致します
※初めは、相対パスだと思いましたが、、
回答2件
0
解決できました。ありがとうございました！
解決できた理由は、相対パスによるミスでした。
imgとhtml,scssとcssのディレクトリー構造が原因でした。
お騒がせいたしました。
本当にお手数おかけしましたm(_ _)m
投稿2021/12/20 18:18
編集2021/12/21 11:52総合スコア103
0
ベストアンサー
コードに指定している場所にファイルがあれば全部ちゃんと表示されるのでファイルのアップ忘れかキャッシュ。
投稿2021/12/11 09:58
総合スコア80861
あなたの回答
tips
プレビュー
Q&A
