こんにちは！エンジニアの中沢です。
JavaScriptでは画像を表示するために「document.write」で「<img>タグ」を使用します。
任意の画像を指定して表示できるので、上手く活用してください。
この記事では、
・JavaScriptで画像を表示するには？
・document.writeとは
という基本的な内容から、
・<img>タグで画像を表示する方法
などの応用的な使い方に関しても解説していきます。
今回はこれらの方法を覚えるために、画像を表示するためのさまざまな使い方をわかりやすく解説します！
JavaScriptで画像を表示するには？
JavaScriptで画像を表示するには、「document.write」を使います。
「document.write」はページに文字列を表示する機能ですが、<img>タグを指定することで、Webページの画面に画像を表示することができます。
この記事では、画像を表示するを順番に解説していきます。
document.writeとは
ここでは、「document.write」の使い方を解説します。
まずは、「document」に関する基本的な知識から勉強していきましょう！
JavaScriptでは「document」を活用することで、Webページを構成しているHTML要素へプログラム上から簡単にアクセスできます。
「document.write」は、JavaScriptで最も手軽に「文字列」を画面に出力することができる方法です。
「write」の引数へ出力したい文字列を指定するだけで、Webページの画面にテキストが表示されるので使い方も簡単です。
また、writeの引数はHTMLタグを認識することも可能なので、<img>タグを指定することで画像を表示することができます！
「document」の使い方はこちらの記事で詳しく解説しているので、ぜひ確認してください。
<img>タグで画像を表示する方法
ここでは、<img>タグで画像を表示する方法を解説します。
画像を表示するには、document.writeの引数に<img>タグで表示する画像のURLを指定します。
次のプログラムで確認してみましょう。
document.write('<img src="https://www.sejuku.net/blog/wp-content/uploads/2017/10/voice_logo.png" alt="画像の解説文">')
実行結果：
このようにして画像を表示することができました。
画像の表示については次の記事で詳しく解説しているので、ぜひ確認してください。
ファイルの読み込み方法まとめ
ファイルを読み込む様々な使い方についてはこちらの記事で解説しているので、ぜひ確認してください。
まとめ
いかがでしたか？
今回はJavaScriptで画像を表示する方法を解説しました。
任意の画像を指定して表示できるので、ぜひ活用してくださいね。
もし、画像を表示する方法を忘れてしまったらこの記事を確認してください！
