JavaScript で URL から画像を読み込む

今日の記事では、JavaScript で指定された URL から画像をロードする方法について説明します。

JavaScript で URL から画像を読み込む

image タグの HTML 要素は、ドキュメントに写真/画像を埋め込みます。src 属性は、埋め込む必要のある写真/画像への方向を伝えます。

Src は、image 要素に必要な画像の URL です。

srcset をサポートするブラウザでは、srcset は 1x ピクセル密度記述子を持つ候補画像のように扱われます。ただし、そのピクセル密度記述子を持つ画像が srcset または srcset に w 記述子が含まれている場合を除きます。

以下は、Web で最も一般的に使用される画像ファイル形式のリストです。

1. APNG - アニメーション化されたポータブルネットワークグラフィックス
2. GIF - グラフィックス交換フォーマット
3. PNG - ポータブルネットワークグラフィックス
4. WebP - Web 画像形式
5. SVG - スケーラブルなベクターグラフィックス
6. JPEG - 共同写真専門家グループの画像
7. AVIF - AV1 画像ファイル形式

静止画像とアニメーション画像の両方で、PNG、JPEG、GIF よりもはるかにうまく機能するため、WebP や AVIF などの形式をお勧めします。WebP は Safari で広くサポートされていますが、AVIF は Safari ではサポートされていません。

SVG は、さまざまなサイズで正確に描画する必要がある画像に推奨される形式です。詳細については、image のドキュメントをご覧ください。

次の例でそれを理解しましょう。

<input type="text" value="helloworld" id="imageName"/>
<input type="button" id="insert-btn" value="Insert" />

document.getElementById('insert-btn').onclick = function() {
  const val = document.getElementById('imageName').value;
  const src = 'https://google.com/images/' + val + '.png';
  let imgTag = document.createElement('img');
  imgTag.src = src;
  document.body.appendChild(imgTag);
}

上記の例では、ユーザーが特定の画像の値を動的に入力できる入力要素を定義しました。input オプションの代わりに select ドロップダウンを指定し、ユーザーの選択に基づいて画像を変更できます。

ユーザーがボタンを押したら、ユーザーの選択を取得し、ドキュメントの img 要素を作成します。画像の場所またはパスを src 属性として設定し、画像要素を子として既存の DOM に追加します。

デモ