HTMLImageElement: currentSrc 屬性

只讀的 HTMLImageElement 屬性 currentSrc 表示其所代表的 <img> 元素中當前顯示的圖片的 URL。

一個字串,指示 HTMLImageElement 所代表的 <img> 元素中當前可見的圖片的完整 URL。當您使用 sizes 和/或 HTMLImageElement.srcset 屬性提供多個影像選項時,這非常有用。currentSrc 允許您確定在提供的影像集中,瀏覽器選擇了哪張影像。

示例

在此示例中,為一張時鐘圖片提供了兩種不同的尺寸。一種是 200px 寬,另一種是 400px 寬。提供了 sizes 屬性來指示,如果視口寬度小於 400px,則影像應以文件寬度的 50% 的比例繪製;否則,影像以文件寬度的 90% 的比例繪製。

HTML

html
<img
  src="/en-US/docs/Web/HTML/Reference/Elements/img/clock-demo-400px.png"
  alt="Clock"
  srcset="
    /en-US/docs/Web/HTML/Reference/Elements/img/clock-demo-200px.png 200w,
    /en-US/docs/Web/HTML/Reference/Elements/img/clock-demo-400px.png 400w
  "
  sizes="(width <= 400px) 50%, 90%" />

JavaScript

js
const clockImage = document.querySelector("img");
const p = document.createElement("p");

p.textContent = clockImage.currentSrc.endsWith("200px.png")
  ? "Using the 200px image!"
  : "Using the 400px image.";
document.body.appendChild(p);

結果

規範

規範
HTML
# dom-img-currentsrc-dev

瀏覽器相容性