スライドショー

【JavaScript入門】画像を読み込み表示する方法

こんにちは!エンジニアの中沢です。

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」の使い方はこちらの記事で詳しく解説しているので、ぜひ確認してください。

HTMLの要素を取得する! JavaScriptのdocumentプロパティの使い方
更新日 : 2019年4月7日

<img>タグで画像を表示する方法

ここでは、<img>タグで画像を表示する方法を解説します。

画像を表示するには、document.writeの引数に<img>タグで表示する画像のURLを指定します。

次のプログラムで確認してみましょう。

document.write('<img src="https://s3-ap-northeast-1.amazonaws.com/samurai-blog-media/blog/wp-content/uploads/2017/10/voice_logo.png" alt="画像の解説文">')

実行結果:
ロゴ

このようにして画像を表示することができました。

画像の表示については次の記事で詳しく解説しているので、ぜひ確認してください。

【HTML入門】width,height属性で画像サイズを指定する方法と注意点
更新日 : 2019年7月31日
【HTML入門】画像の位置を指定してテキストを回り込ませる方法
更新日 : 2019年8月1日

ファイルの読み込み方法まとめ

ファイルを読み込む様々な使い方についてはこちらの記事で解説しているので、ぜひ確認してください。

JavaScriptでファイル処理! JSONやCSVなどのファイルを読み込もう
更新日 : 2019年4月16日

まとめ

いかがでしたか?

今回はJavaScriptで画像を表示する方法を解説しました。

任意の画像を指定して表示できるので、ぜひ活用してくださいね。

もし、画像を表示する方法を忘れてしまったらこの記事を確認してください!

LINEで送る
Pocket

ITエンジニアへ転職したい方におすすめ

自分を評価してくれる企業に転職して年収を上げたい! 自分のスキルにあった独自案件を知りたい!
エンジニアは今もっとも注目されている職業の1つ。エンジニアになって年収を増やしたい方や、あなたのスキルに見合った企業へ転職したいエンジニアの方も多いですよね。

しかし、大手の転職媒体は扱う求人数が多くても、誰もが登録しているので競争率もかなり高くなっています。そのため、あなたの条件に見合った企業を見つけても転職するためには、相応の努力とスキルが必要となります。

こういった媒体では、未経験からエンジニアを目指す方やエンジニア歴2〜3年で転職を考えている方にとって、最適な転職環境とはいえません。

そこでオススメしたいのが、未経験者や若手エンジニア向けの独自案件を多く掲載している「侍ワークス」です。

侍ワークスは、独自案件を多く掲載しているだけでなく、

・応募から就業まで一貫したサポート

・就業後もアフターフォロー

といった経験の浅い方や初めてエンジニアを目指す方にも安心のフォロー体制が整っています。もちろん登録は完全無料!しかも案件を見るだけなら登録も不要です。

まずは、お気軽にどんな求人があるか見てみてください。あなたにピッタリの企業がきっと見つかりますよ! 侍ワークスの求人情報を見る

書いた人

中沢 丈

中沢 丈

フリーランスエンジニア。
システム開発からコンテンツ作成まで幅広く対応します。

連絡先はこちらです。
[email protected]