javascript - 检查在 HTML picture 元素中加载了什么图像

Question

我的应用程序中有以下代码:

<picture>
    <source media="(max-width: 1300px)" srcSet={src.img['1']} />
    <source media="(max-width: 1599px)" srcSet={src.img['2']} />
    <source media="(max-width: 2049px)" srcSet={src.img['3']} />
</picture>

是否可以通过编程方式检查浏览器在图片元素中加载了哪些图像？我必须再次使用该图像(现在我在工具提示中默认使用 img['1'])但我想避免再次加载图像。

Answer 1

通常我只是打开控制台，然后将这段代码放在那里。

console.log( img.src )

请记住，尽管您可以使用带有 JPG 回退的 WebP 等现代图像，但如果支持 WebP，它就不会回退。

此外，您需要先选择元素，否则您将得到未定义的图像。