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">");
}