通知
すべてクリア

画像だけが表示されない

投稿: 7
コミュニティ参加日: 1週間前

サイトURLを開くとindex.html内のはめ込み画像だけが表示されないのですが何が悪いのでしょうか?

対象サービス
11件の返信
lukecat101
投稿: 96
コミュニティ参加日: 11か月前

それだけでは確実な事は言えませんが、考えられる可能性としては

 

●画像のパスが間違っている

(htmlをローカル環境で作成して画像をCドライブからの絶対パスで記述していたりするとよく見られる現象です)

 

●画像をサイトに上げ忘れている

 

●直リン禁止のサイトから読み出そうとしている

 

返信
1件の返信
コミュニティ参加日: 1週間前

投稿: 7

試行錯誤の末エラーメッセージがNot allowed to load local resource:
になりました。

正に
(htmlをローカル環境で作成して画像をCドライブからの絶対パスで記述していたりする
で、結果local resourceにアクセスできていないのではないかと思います。

この様な場合どのように解決すればいいのか方法を教えて頂けないでしょうか、
よろしくお願いします。

返信
投稿: 7
コミュニティ参加日: 1週間前

ご教示有難うございます。

アップロードファイル内のhtmlファイルを開くと画像も表示され、同じファイルに画像もあります。即ちアップロードされた後画像が表示できない状態になっているのではないかと思い、

サイトURLの画像のソースをチェックしたところ
Images must have alternate text
と言うエラーと言う所まで分かりました。

具体的にどのようにして画像にtitleを持たせるのかその方法を教えていただけないでしょうか。

返信
1件の返信
lukecat101
コミュニティ参加日: 11か月前

投稿: 96

それでしたら

<img src=画像ファイル名" alt="画像の説明" title="タイトル">

で、画像の説明がないから表示しないというエラーの場合は

alt="ココ"

に入れてください。

 

 

title=""

はマウスオーバーすると表示される文字列です。

返信
lukecat101
投稿: 96
コミュニティ参加日: 11か月前

『画像にalt属性が指定されていません』というエラーは、他の原因でも表示されるようです。

 

画像の名前を変更して、<img src=画像ファイル名" >も変更すると表示された、という人もいるので、うまくいかないようなら試してみてください。

 

返信
投稿: 99
コミュニティ参加日: 11か月前

「はめ込み画像」というものの定義が不明ですが、「index.htmlファイルから、imgタグを用いて、何かしらの画像を表示させようとしている」ということであっていますか。

XServer Staticでは「サーバー側のエラーログ」が見られないので、原因の特定が難しそうではありますが、見るべき順序としては以下かな、と思いました。

 

【1】画像のファイル名が適切に指定され、画像自体にアクセスできているか

Chromeなどのブラウザにある「デベロッパーツール」を使うのが手っ取り早そうでしょうか。
OS(Windows/Mac)やブラウザ(Chrome/FireFox)などによって名称や細かい手順などは異なると思いますが、以下のような作業で確認できます。

 ※「デベロッパーツールとは何かわからない場合」や「デベロッパーツールの基本的な使い方がわからない場合」などはググって調べてくださいっ!

 

・デベロッパーツールを開いた状態で、index.htmlファイルにアクセスする or index.htmlにアクセスした状態でデベロッパーツールを開き、ページを再読み込み(Ctrl + F5 など)する

  ↓

・デベロッパーツールの「ネットワーク(Network)」から、その画像ファイルのステータスコードを確認する。

  ↓

・返ってくるステータスコードは「200」か「404」のどちらかである確率がとても高いと思います。

 200の場合・・・画像ファイルへのアクセス自体はできています。index.htmlへのアクセスで画像が表示されない場合、別の問題(【2】に列挙した可能性)があると思われます。
 404の場合・・・index.htmlのimgタグで指定した画像の「フォルダ名、ファイル名」が誤っていて、画像にアクセスできていない状態です。

 

 余談ですが、可能性だけでいうと、「401」とか「403」などのステータスが返ってきている場合や、かなりレアなケースとしては、「画像は画像でもカウンタープログラム(php)を設置してそこにアクセスしようとしていた→XServer Staticではプログラムは使えないから画像が表示されていない」みたいなこともあるかもしれません(この場合のステータスコードが何になるかは、ちょっとわかりません…)。

 

【2】【1】で読み込ませているファイルの名称が正しく、ステータスコードが200の場合

可能性レベルでいうと、以下のようなケースはあるかもしれません。

・cssファイルで「display:none」など、画像が表示されなくなるような指定をしてしまっている可能性
・JavaScriptで画像周辺のタグを動的に書き換えている可能性

 

 

 

なお、「Images must have alternate text」はlukecat101さんが記載している通り、「imgタグに代替テキスト(alt)属性が指定されていないこと」に対するエラー(警告)だと思いますが、imgタグのaltは「その画像の内容を文字情報で示す意味」しかなく、

・スクリーンリーダーでアクセスしたときに画像の内容を読み上げてくれる
・表示された画像にマウスカーソルをあてると、altで指定した文字列が表示される
・Googleなどの検索エンジンのクローラーに対して、その画像が何を意味するかを伝える

程度の役割しかありません。

altが指定されていないからといって画像自体が表示されなくなることはないので、今回の問題とは関係ない可能性がとても高いです。
言い換えると、「img src="フォルダ名、ファイル名"」の「フォルダ名、ファイル名」が正しく指定されていれば、(本来はalt属性も入れるのが良いものの、)altがなくても画像は表示されます。

返信
1件の返信
コミュニティ参加日: 1週間前

投稿: 7

有難うございます、少しわかって来て試行錯誤の結果

エラーメッセージがNot allowed to load local resource:
になりました。

はめ込んだ画像にアクセスできるようにするにはどうすればいいのでしょうか?
或いは、画像ファイルをlocalでない場所に置くにはどうすればいいのでしょうか?

よろしくお願いします。

返信
投稿: 7
コミュニティ参加日: 1週間前

多くの先生方、色々ご教示有難うございます。XServer Staticを使って初めてHPを作ろうと知識ゼロで始めて3日目です。
試行錯誤しながらファイルの置き場所やファイル名やら色々変更したり四苦八苦色々試してみて

Images must have alternate textメッセージは出なくなったのですが、今度は
Not allowed to load local resource:のメッセージが出るようになりました。
画像が表示できないこと以外はアップロードできているのですが…。

local resourceにaccess出来るか、或いはresourceをlocal fileでなくアクセスできる場所に置くにはどのようにすればいいのでしょうか?

初心者ですいません。

返信
2件の返信
lukecat101
コミュニティ参加日: 11か月前

投稿: 96

1)一度、別の場所に画像をアップロードして、その画像を表示できるかどうかテスト

※画像は、/img などと画像専用フォルダを作ってそこにまとめるとファイルが散らからない

/img/01.png

という風にアップロードしておいて

アドレスで表示されるかどうかを確認

https://st*** .static.jp/img/01.png

 

これで表示されなければ、画像自体がそこにアップロードされていない

 

2)<img src=/img/01.png" alt="猫画像" title="私が撮りました">

と、適当に説明を入れてhtmlコードを書き換える。

 

絶対パス  https://st .static.jp/img/01.png

で入れてもいいですが、

相対パス /img/01.png

の方が、サイト引っ越しの時に事故が起こらない。

 

3) https://st ***.static.jp/**.htmlにアクセスして確認

返信
コミュニティ参加日: 1週間前

投稿: 7

ありがとうございました。

相対パスに変更して画像が表示できました。万歳!!
感謝申し上げます。

返信
投稿: 7
コミュニティ参加日: 1週間前

皆さま

有難う御座いました、lukecat101さまの丁寧なご教示が直接奏功し解決出来ました、ありがとうございました。

返信