JavaScript初心者のメモとして「JavaScriptで画像を表示する方法」を残します。
今まではホームページの作成にHTMLのみで画像を表示していましたが、せっかくJavaScriptを学習しているのでJavaScriptでも表示したいと思ってやってみました。
#画像を表示する方法
##1.HTMLで表示する方法
1枚だけ画像を画面に表示するためのHTMLです。（コピーすれば何枚でも表示できます）
imgタグにより画像を表示しています。
まずはhtmlの全体です。
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>HTMLで画像を表示する方法</title>
</head>
<body>
<img src='images/image000.jpg'>
</body>
</html
次にimgタグだけみてみます。
<img src='images/image000.jpg'>
imgタグのsrcの部分は画像がhtmlに対してどのこフォルダーに入っているかを表しています。
この場合だとimagesフォルダーの下にimage000.jpgという画像ファイルが入っています。
imagesフォルダーはhtmlと同じ階層（フォルダー内）にあります。
これでhtmlのみで画面上に画像を表示できます。
##2.JavaScriptで表示する方法
ではこれからJavaScriptで画像を表示してみましょう
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>HTMLで画像を表示する方法</title>
</head>
<body>
<img src='images/image000.jpg'>
<script src="main.js"></script>
</body>
</html
main.js
'use strict';
{
document.write('<img id="carousel__main" src="images/image000.jpg">');
}
上記がJavaScriptで画像を表示するためのコードです。
以下説明します。
HTMLにJavaScriptを読み込ませるためにスクリプトタグを追加しています。
<script src="main.js"></script>
画面に出力する時は以下のコードを使用します。
document.write
//画面に出力するコマンド
を使用して画面に出力することができます。
文字を表示する時は以下のように書きます。
main.js
'use strict';
{
document.write('JavaScriptで画像を表示する');
}
同じ容量で画像を出力してみます。
main.js
'use strict';
{
document.write('<img src="images/image000.jpg">');
}
以上の方法でJavaScriptで画像を画面に表示することができます。
ちなみに以下のように「'」ではなく「"」で書くと文字の区切る場所が異なり（青の文字部分）
エラーとなります。
main.js
'use strict';
{
document.write("<img src="images/image000.jpg">");
}