HTMLImageElement: currentSrc プロパティ

HTMLImageElementcurrentSrc プロパティは読み取り専用で、表す <img> 要素で現在表示されている画像の URL を表します。

HTMLImageElement で表される <img> 要素の中で、現在表示されている画像の完全な URL を示す文字列です。これは、sizesHTMLImageElement.srcset 属性を用いて複数の画像オプションを提供する場合に有用です。currentSrc を使用すると、提供された画像セットの中からブラウザーがどの画像を選択したかを判断することができます。

この例では、時計の画像に 2 種類のサイズを用意しています。一つは幅 200px で、もう一つは幅 400px です。 sizes 属性は、ビューポートが幅 400px 未満の場合は画像を文書幅の 50% で、それ以外の場合は画像を文書幅の 90% で描画することを指定しています。

HTML

html
<img
  src="/en-US/docs/Web/HTML/Element/img/clock-demo-400px.png"
  alt="Clock"
  srcset="
    /en-US/docs/Web/HTML/Element/img/clock-demo-200px.png 200w,
    /en-US/docs/Web/HTML/Element/img/clock-demo-400px.png 400w
  "
  sizes="(max-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 400px image!"
  : "Using the 200px image.";
document.body.appendChild(p);

結果

仕様書

Specification
HTML
# dom-img-currentsrc-dev

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
currentSrc

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support