在 JavaScript 中從 URL 載入影象

今天的文章將介紹如何在 JavaScript 中從指定的 URL 載入影象。

在 JavaScript 中從 URL 載入影象

圖片標籤的 HTML 元素在文件中嵌入了一張照片/圖片。src 屬性攜帶指向你需要嵌入的照片/影象的方向。

Src 是影象元素所需的影象的 URL。

在支援 srcset 的瀏覽器中，src 被視為具有 1x 畫素密度描述符的候選影象，除非具有該畫素密度描述符的影象已經在 srcset 中定義或 srcset 包含 w​​描述符。

以下是網路上最常用的影象檔案格式列表。

1. APNG - 動畫行動式網路圖形
2. GIF - 圖形交換格式
3. PNG - 行動式網路圖形
4. WebP - 網路圖片格式
5. SVG - 可縮放向量圖形
6. JPEG - 聯合影象專家組影象
7. AVIF - AV1 影象檔案格式

推薦使用 WebP 和 AVIF 等格式，因為它們對於靜態和動畫影象的效果都比 PNG、JPEG 和 GIF 好得多。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);
}

我們在上面的示例中定義了輸入元素，使用者可以在其中動態輸入特定影象的值。你可以提供選擇下拉選單而不是輸入選項，並根據使用者選擇更改影象。

一旦使用者點選按鈕，獲取使用者選擇併為文件建立 img 元素。將影象的位置或路徑設定為 src 屬性，並將影象元素作為子元素附加到現有 DOM。

演示