質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

FTP

FTP(File Transfer Protocol)は、ネットワークでのファイル転送を行うための通信プロトコルの1つである。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Q&A

解決済

2回答

2979閲覧

Filezillaを使うと、一部の画像が表示されない

free_teku

総合スコア103

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

FTP

FTP(File Transfer Protocol)は、ネットワークでのファイル転送を行うための通信プロトコルの1つである。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

0グッド

0クリップ

投稿2021/12/11 05:46

編集2021/12/18 06:37

前提・実現したいこと

表題の通り、前にも起こったのですが、一部の画像が表示されなくなります。
私は、パスを間違えないように自動的に入力できるプラグインを使っています。
なので、vscodeでそれ通り記述しています。

今回、前にも起こったことがあるため、
原因追及のため、」ここで質問しました

原因追及:相対パスが原因でした
scss:(../../img~)→ SCSSフォルダーがさらに3つのフォルダーに分かれているため、左記の表記です
css:自動的に../../img表示。これをimgフォルダーでも分類していないため、相互で不釣り合いの相対パスになるという認識で間違えないでしょうか?

この仮説が正しいとすると、フォルダー構成を考えていかないといけないため、ご教授お願い致します。

前提:SCssで書いています。
ファイル構造は下記です
ftp-no-img

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

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

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

下記にフォルダー添付します。ご教授頂けると幸いです。
何卒よろしくお願いいたします。(__)

FTPソフトはFilezillaのことを指いています。
ローカルではきちんと保存されています。
画像2

画像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を自動選択設定にして、修正→できない

根本的に何が原因でどんな改善策があるのか、ここまでしてできないとわからないです。ご教授お願い致します
※初めは、相対パスだと思いましたが、、

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2021/12/11 05:53

そもそも提示のhtmlにはcssがリンクされてません。 あと、どんなに「自動で入力」と訴えたところで、それで本当に正しいという証拠にはなりません。起きていることが事実なのですから、きちんと「そのcssの記述のあるファイルからのパス」になっているのか確認する必要はあります。 嫌なら絶対パスにするしかないです。 現在提示されている情報から他者が言えることは先に書いた「そもそもcssがリンクされてない」ということくらいです。リンクされているとしてもサーバー上の構造も提示されてないので他者には確実なことは言えませんので「パスが違うかキャッシュかscssそのままやってしまってるか」くらいですかね。
m.ts10806

2021/12/11 07:53 編集

・bg-img とは何でしょうか ・「FTPを使うと」というタイトルですが質問本文に何も言及されていないので関連性が不明です ・imgフォルダに配置されていて、imgフォルダと同階層のHTMLを呼び出しているならどの画像も表示されます。本当にその画像名でしょうか。トップフォルダだけ提示されてもこちらでは判断できません。「FTP」という単語からの想像でしかないですが、ローカルではちゃんと表示確認されてるのでしょうか。
free_teku

2021/12/11 08:24

m.ts10808さん ご回答ありがとうございます。 CSSがリンクされてないことはないかな、と思います。きちんとほかの装飾はしているからです。
m.ts10806

2021/12/11 08:28

>CSSがリンクされてないことはないかな、と思います 「他が装飾されてる」というのが質問内容からは伝わりませんでした。 ただ「リンクされてるかどうか」の根拠が「ブラウザのコンソールに404エラーが出ていない」というのでしたら納得できますが、その確認はされてないということですよね。
free_teku

2021/12/11 08:28

bg-imgはbackground-img: url(../../img~);です。 FTPソフトはFilezillaのことを指いています。 ローカルではきちんと保存されています。 ※わかりにくく、申し訳ありません。 何卒よろしくお願いいたします。
m.ts10806

2021/12/11 08:41

質問内容調整してください。 「bg-img」という独自表現もそうですし、他者が再現するには情報が不足しすぎています。 今言えることは先に書いたように「コードに指定している場所にファイルがあれば全部ちゃんと表示される」ということだけ。
free_teku

2021/12/14 05:46

遅くなりました。修正しました。ご確認いただけると幸いです。<(_ _)> よろしくお願いいたします。
m.ts10806

2021/12/15 21:06

既にした回答と変わりはないです。404の原因はそうたくさんありません。 それにディレクトリー構造には画像で提示されているimg/bg.pngというのはないようですが。
guest

回答2

0

解決できました。ありがとうございました!
解決できた理由は、相対パスによるミスでした。
imgとhtml,scssとcssのディレクトリー構造が原因でした。

お騒がせいたしました。

本当にお手数おかけしましたm(_ _)m

投稿2021/12/20 18:18

編集2021/12/21 11:52
free_teku

総合スコア103

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2021/12/20 20:18

回答ですかこれ
guest

0

ベストアンサー

コードに指定している場所にファイルがあれば全部ちゃんと表示されるのでファイルのアップ忘れかキャッシュ。

投稿2021/12/11 09:58

m.ts10806

総合スコア80875

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問