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

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

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

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

614閲覧

サイト制作    画像表示

soramaru

総合スコア25

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2022/01/23 01:28

15行目の画像を表示させたいです。
スペルミス、タグミス自分なりに確認いたしました。
駆け出しのためご鞭撻お願いします。

パスは
課題ファイル
|
|-3-3
||-image
|||-logo_green.png
ということになっています。

コード ```<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>株式会社LiNew</title> <link rel="stylesheet" type="text/css" href="base.css"> <link rel="stylesheet" type="text/css" href=""> <script src=""></script> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <header> <div class="header-box"> <div id="inner-header"> <img src ="image/logo_green.png"> <ul class="header-list"> <li class="header-list">News</li> <li class="header-list">About</li> <li class="header-list">Serice</li> <li class="header-list">Recruit</li> <li class="header-list">Contact</li> </ul> </div> </div> </body> </html>

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

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

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

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

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

m.ts10806

2022/01/23 03:07

https://teratail.com/questions/9cpxr6wepif4ld 解決してないのに解決済みにしたのはなぜでしょう。 質問は編集できるので同じような質問を繰り返すのはよろしくないかと(迷惑行為として認識されます) それに画像が表示されない原因ってそんな多岐に渡らないので調べて何も見つからないということはないのでは。 >スペルミス、タグミス自分なりに確認いたしました。 これが何をどう確認したのか分かりませんし、「自分なり」で解決しないなら その「自分なり」で出来る範囲を広げないことには逐一人に聞くことになります。 自分で解決できるようになるのが最も早く解決できるようになるわけですし。
soramaru

2022/01/23 04:02

ご指摘ありがとうございます。 すいません、焦っている部分と迷惑行為の説明をよく見ていませんでした。 気をつけます。
m.ts10806

2022/01/23 04:22

質問は編集できるので
soramaru

2022/01/23 04:24

承知いたしました。
Lhankor_Mhy

2022/01/24 02:23

フォルダ構成がよくわからないのですが、こういうことでしょうか? C:. │__課題ファイル.html │__ └─3-3 ____└─image ____________logo_green.png
soramaru

2022/01/25 04:13

logo_green.pngのファイル内に入っています。
Lhankor_Mhy

2022/01/25 04:53

うーん、お聞きしているのはフォルダ構成なのですが…… treeコマンドの出力を貼っていただくことはできますか?
Lhankor_Mhy

2022/01/25 04:55

もしかして、ファイルとフォルダ(ディレクトリ)の違いがわからない、とかですか?
soramaru

2022/01/25 06:49

相対パスなど調べて、問題解決いたしました。 ありがとうございます。
guest

回答1

0

ベストアンサー

解決してほしいと言うのは
<img src ="image/logo_green.png">
の部分だけでいいですか?

このタグで写真が表示されない理由は2つあると考えられます。
(恐らく2番目が決定的)
1つ目は、使用ツールによって異なりますが、srcの部分と=の部分の空白です。
この空白を消すことで改善されるかもしれません。

決定的な答え
2つめは、image/logo_green.pngの部分です。
こちらは、リンクを入力する場所となっています。
通常の書き方はこのようになっています。

HTML

1<img src="https://asa-kyo.1web.jp/1234567890.webp">

または

HTML

1<img src="/1234567890.webp">

あなたの場合だと、html表示リンクが、「https://rogpl.1web.jp 」の場合だと、
https://rogpl.1web.jpimage/logo_green.png」と言うリンクから画像を探すことになっているので、サイトに画像は表示されません。
対処法は「image」の前に/をいれる、または「image」を削除する
またはリンクをhttps://から始まるリンクにすることです。

できなかったら返信願います。

この答えに設定したリンクは私達のサイトのリンクです。
このリンクに画像はありませんので、リンクを変更してから表示してください。

投稿2022/01/23 07:35

ROGPURS

総合スコア78

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

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

soramaru

2022/01/23 08:03

丁寧でわかりやすい回答誠にありがとうございます。 付け加えてに、なってしまうのですが上記で仰っていたhtml表示「https://rogpl.1web.jp 」はどこを見ることで把握できるのでしょいか。 他サイトサイト確認しているのですが目ぼしいサイトが見当たらず、悩んでおります。
ROGPURS

2022/01/23 08:10

あなたのサイトのURLがhttps://rogpl.1web.jpの場合 ↓ このタグだとhttps://rogpl.1web.jpimage/logo_green.pngになる ↓ 対処法 <img src=https://あなたのサイトのドメイン/logo_green.ping>にすることです。
soramaru

2022/01/23 08:25

ご回答理解いたしました。 参考にさせていただきます。 誠にありがとうございます。
Lhankor_Mhy

2022/01/24 01:00

うーん、誤記かなあと思ったのですが、コメント欄でも同じ間違いをしているのでもしかすると本当に勘違いをされているかもしれないと思いましたので、低評価します。 現在位置が https://example.com 相対パスが image/logo_green.png である場合のパスの解釈は、 ❌ https://example.comimage/logo_green.pnghttps://example.com/image/logo_green.png です。 対処法も微妙です。 https://developer.mozilla.org/ja/docs/Learn/Common_questions/What_is_a_URL#examples_of_relative_urls
ROGPURS

2022/01/26 08:55

Lhankor_Mhyさん。 返信ありがとうございます。 間違っていると指摘がありましたが、実際にこの表記のしかたでは、/が1番前にないとHTMLとして作用しません。 なので、https://example.com/image/logo_green.png この様にはなりません。 実際に弊社のシステムでも検証したところ、Lhankor_Mhyさんの方法では、HTMLとして作用しませんでした。 弊社はプロのプログラマーに検証してもらっているので間違いはないと思います。
Lhankor_Mhy

2022/01/27 05:03

そうでしたか。 そのプログラマさんはおそらくHTMLが苦手なのでしょうね。あとからご覧になる方のために低評価のままとさせていただきます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問