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

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

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

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

Q&A

解決済

3回答

770閲覧

HTML 画像入力について

risa0322

総合スコア2

HTML

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

0グッド

0クリップ

投稿2021/04/05 00:51

編集2021/04/05 03:47

プログラミングの勉強を最近始めた初心者です。
HTMLの画像取り込みについて
<img src="images/〜">
で画像を取り込めると思うのですが、自分が持ってる画像を取り込み、確認すると画像自体は表示されず、四角いマーク?が表示されます。
取り込めない画像なのかと思い、別の画像を入力したのですが、同じように四角のマークが入るだけです。
何が原因でしょうか?

a.pngにまずは変えてみましたが、反映されません。
〈a.png="/〜.png"〉←間違えてるところがありますか?

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

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

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

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

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

K_3578

2021/04/05 02:05

<img src="">については他の方が回答されているので質問に関してですが、あまりに解決に向かわないようでしたら階層とHTMLのソースを丸々コピペして頂ければ解は得られると思います。 が、m.ts10806さんの回答にある通り、「相対パスと絶対パス」を理解していれば自分で解決出来る内容かと思います。 分からなければ調べてみれば参考記事はいくらでも見つかるのでチャレンジしてみてください。
K_3578

2021/04/05 05:05 編集

行き違いだったため削除.
guest

回答3

0

ベストアンサー

そもそも文法を理解出来ていなさそうなので、まず、画像をhtmlで表示するには<img>タグを使います。
<img>の必須属性としてsrc属性があります。これは画像ファイルのURLを指定する属性です。

HTML

1<img src="a.png">

Automatic9045さんの回答で上記のような例を挙げられていますが、ここでのa.pngというのは
例として挙げられたもので、aという名前の.pngという拡張子が付いているのでpngファイル
という事です。あくまで、a.pngは質問者さんが使用したい画像ファイルを指定する必要があります。
指定する際に画像ファイルがどこに配置されているか、それを指定するために絶対パスと相対パスという
ものを使います。
下記に参考サイトを載せておくのでご一読ください。
【初心者向け】絶対パスと相対パスの違いについて解説

投稿2021/04/05 04:54

K_3578

総合スコア1282

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

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

risa0322

2021/04/05 05:04

画像が表示されました! 初歩的なこともわかっていない中、わかりやすい説明ありがとうございました。
K_3578

2021/04/05 05:11

ご解決されたようでなによりです。ですが、今回の内容は基礎文法を理解していればおかしいことに 気付くはずなので、文法をしっかり復習なさってください。 それと、これからHTML,CSSだけでなくサーバサイドも学習されるなら初心者の方にはコード補完等をしてくれるIDE(統合開発環境)で開発されることをお勧めしておきます。
guest

0

おはようございます。
いくつかの可能性があります。

1. パスが間違っている

試しに表示したい画像をHTMLファイルと同じフォルダに入れてみて下さい。
そして、例えばその画像がa.pngという名前であれば

HTML

1<img src="a.png">

としてみて下さい。表示されましたか?

2. 画像ファイルが破損している

手順1で改善されなかった場合は、画像ファイルが破損している可能性が高いです。
画像の拡張子を直接ファイル名変更から変更したりしていませんか?
表示させたい画像を「名前をつけて保存」で保存し直してみて下さい。

投稿2021/04/05 01:11

Automatic9045

総合スコア313

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

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

ex025

2021/04/05 01:28

1. で解決できた場合のための補足です。 HTMLファイルと同じフォルダにimagesというフォルダを作り、その中に画像ファイルを入れた場合、 <img src="images/a.png"> となります。 imagesの中にさらにcategory1というフォルダを作って画像ファイルを入れた場合、 <img src="images/category1/a.png"> となります。 もちろん、フォルダの名前は自由に変えられます。 ここまで来ればパスについてはもうわかるでしょう。
guest

0

<img src="images/〜">

で画像を取り込めると思うのですが、

正確には違います。
srcの中は「実際に画像を置いた場所」を記載します。既に回答にある「パス」は「場所を指し示す文字列」のことです。

あとは「相対パス」「絶対パス」という考え方は理解しておくべきものですが、実際においた場所を指定するのでimagesというディレクトリが存在しない、もしくは存在しても現在アクセスしているURLから正しく参照できるパスになっていない(相対パスの場合に多い)
のであればimgタグは正しくファイルを参照できないので表示できません。

「srcにはファイルを置いた場所を書く」を念頭にコードと場所の関連性を見直してみてください。

これは「定義したものを使う」となるので他の言語や場面でも活きてきます。

投稿2021/04/05 01:55

m.ts10806

総合スコア80875

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問