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

Shraddha Paghdar 2023年10月12日
JavaScript で URL から画像を読み込む

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

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

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

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

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

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

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

静止画像とアニメーション画像の両方で、PNGJPEGGIF よりもはるかにうまく機能するため、WebPAVIF などの形式をお勧めします。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 に追加します。

デモ

Shraddha Paghdar avatar Shraddha Paghdar avatar

Shraddha is a JavaScript nerd that utilises it for everything from experimenting to assisting individuals and businesses with day-to-day operations and business growth. She is a writer, chef, and computer programmer. As a senior MEAN/MERN stack developer and project manager with more than 4 years of experience in this sector, she now handles multiple projects. She has been producing technical writing for at least a year and a half. She enjoys coming up with fresh, innovative ideas.

LinkedIn

関連記事 - JavaScript Image