在 JavaScript 中從 URL 載入影象

Shraddha Paghdar 2022年5月31日
在 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 影象檔案格式

推薦使用 WebPAVIF 等格式,因為它們對於靜態和動畫影象的效果都比 PNGJPEGGIF 好得多。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。

演示

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