VScodeでの画像表示

前提・実現したいと

VScodeを使ってhtmlについて学習しているのですが、画像の表示の仕方がわかりません。
progateのhtml&cssコースを一通りやったのですが、画像のURLが初めから用意してあり、困ることはありませんでした。
しかし、自分でやろうとするとまずどこに画像を保存すればいいかがわからず、さらにURLをどう取得すればいいのかわかりません。

###問題
画像を表示させる方法がわからないです
Progateで表示させるコードは学習したがそれ以前に表示させたい画像はどこに保存するのか、URLの取得？はどうすれば良いのかがわかりません。
progateでは画像が初めから用意してあり、URLも指定されていたのでそれを書くだけで実行できましたが、今回は自分で用意し、保存、URLの取得、をしなければいけないのでその方法を教えていただきたいです。

###コード

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href="main.css"> </head> <body>

<div>
    <img src="png/unnr.jpeg">
    <h1>hello world</h1>
</div>

</body> </html> 　###階層？ code{index.html main.css png(ファイル){unnr.jpeg}}

codeファイルの中にindex.htmlとmain.cssとpng（画像ファイル）があり、pngの中に画像が入っています

補足情報

超初心者なので丁寧な解説お願いします。

yoshinavi

2019/06/24 20:26

今の質問者さんの状況だと、「VScode」に限らない疑問かと思います。レンタルサーバーの契約や、ドメインの取得等は、されていますか？

ritsu.m

2019/06/25 11:13

契約やドメインの取得などはしていませんそこからですねありがとうございます

行動規範の内容に同意します

回答2件

ベストアンサー

Progateで表示させるコードは学習したがそれ以前に表示させたい画像はどこに保存するのか、URLの取得？はどうすれば良いのかがわかりません。

ローカルに保存したファイルであればそのパスを読めばいいですし、URLを使うということは何らかのWebサーバー上で動いているんでしょうから、まずWebサーバーの仕組みを勉強する必要があります。

仕組みの勉強なしに「どうしたらいいの」と聞かれても、たぶん回答を理解するのも困難だと思います。

投稿2019/06/24 15:53

gentaro

総合スコア8947

ritsu.m

2019/06/25 11:15

画像を入れているファイルをhtmlファイルを保存したファイルと同じところに保存し、相対パス？でURL指定していますが画像が表示されません chromeには画像アイコン？が表示されています

gentaro

2019/06/25 11:29

詳細（コードやフォルダ階層等）を質問文に追記してください。

ritsu.m

2019/06/25 11:55

自分なりに追加しました足りないところがあれば教えていただけると嬉しいです

gentaro

2019/06/25 12:44

追加されたものを見る限り、htmlタグもbodyないなどツッコミどころ満載ではあるものの、一応画像は読み込めます。そもそもの疑問点がよくわからないんですが、これをどうしたいんですか？

ritsu.m

2019/06/25 12:46

すみません他のタグは省略させていただきました、これから追加します画像を背景にしたホームページを作ってみようと思いとりあえず画像を読み込もうと思ったのですが表示されず質問させていただきました

gentaro

2019/06/25 12:58

コードコピペしてindex.htmlファイルを作って、同階層にpngフォルダ作って適当な画像ファイルの名前をunnr.jpegにしてからindex.htmlをブラウザで読み込んだらちゃんと読めましたよ。

ritsu.m

2019/06/25 13:43

検証してくださりありがとうございます同じコード同じファイル名で読み込めたということで自分ももう少しやってみます色々とありがとうございました

ritsu.m

2019/06/27 03:56

できました！色々とありがとうございました

行動規範の内容に同意します

超初心者であればprogateを最初から見直したほうが良いです。
HTMLとCSSはhtml&cssコースを一通り一度見ただけで
覚えられるものではないため、何度も復習が必要です。

投稿2019/06/24 13:26

yasutomi

総合スコア2941

ritsu.m

2019/06/24 13:43

回答ありがとうございます Progateには画像を読み込む為の学習がありませんでした URLがありそれを読み込むコードなどは学習しましたが、vscodeのような開発環境を使用して、画像の保存、URLの取得などの学習はありません故にネットで調べましたが、わからなかったのでこちらで質問させていただきました

yasutomi

2019/06/24 13:50

「HTML 画像表示」で検索してください。 https://www.google.co.jp/search?q=HTML+%E7%94%BB%E5%83%8F+%E8%A1%A8%E7%A4%BA

ritsu.m

2019/06/25 11:15

ありがとうございます

行動規範の内容に同意します

あなたの回答