问题标签 [picture-element]

在http://schema.org/Product范围内，我想为图像定义标记。通常它看起来如下：

但是，现代响应式页面使用该<picture>标签。我试过了...

但它似乎不被谷歌的结构化数据测试工具所接受。将它添加到<img>标签中<picture>对我来说似乎不正确，因为它没有突出整个上下文，因此忽略了图像以各种分辨率存在的事实......

标签的正确微数据图像标记是picture什么？

假设我的 HTML 代码中有一个图像，并且只要图像正在加载，我就想显示一个微调器。我可以通过在 JavaScript 中加载图像并在加载后隐藏微调器来做到这一点，例如：

现在我正在尝试对 HTMLpicture元素做同样的事情。假设我有以下 HTML 代码：

使用上面的 JavaScript 代码，它将加载img标记的来源，即 JPG 版本。然而，浏览器甚至可能不会选择加载 JPG 版本，而是加载 WebP 版本。我知道图像的currentSrc属性，但是只有在加载图像后，此属性才会应用于图像。

基本上我需要在完全加载之前知道浏览器正在加载哪个图像。有谁知道如何实现这一目标？

更新：

我刚刚找到了更多信息。似乎在 Chrome 中，图像的 currentSrc 经常为空，而在 Firefox 中，URL 总是正确的。JS 是否试图在 currentSrc 可用之前访问它？有没有办法防止这种情况？

我正在创建一个 Drupal 8 网站，为了使用带有背景图像的响应式图像模块，我想出了以下解决方法。下面的 JS 函数 setParallaxImage() 从图片元素中的 img 中获取 currentSrc 并将其设置为最外层 div 的背景图像。img 本身不显示（在 CSS 中显示：none）并给出了一个虚拟图像，因为我只需要它来获取 currentSrc。该函数通过 onload 和 onresize 调用。

该代码似乎在 Firefox 中运行良好。调整浏览器大小超过断点时，图像会在一瞬间变灰，然后从正确的源加载图像。但是，在 Chrome 中，当快速调整大小超过断点时，图像可能会变灰并且根本不显示，即 background-image: url()。通常，如果我多次调整窗口大小，图像最终会出现。有谁知道为什么会发生这种情况？感谢您的阅读。

JS

HTML

所以当我遇到这个问题时，我正在练习使用html中的图片元素。所以发生的情况是，当我srcset在本地文件夹中使用图像时，图像永远不会显示，而是使用后备图像“随机 5”。但是当我使用来自谷歌或其他地方的 URL 链接时，图像显示完全正常。我正在使用 Chrome 的最新版本并使用 Visual Studio Code 进行编码。请帮忙！！

根据下面的图片标签，浏览器如何判断srcset属性中的三个文件中的哪一个要下载？我的理解是，浏览器会根据视口的宽度来确定这三个（300px、600px 或 800px）中的哪一个。size 属性根据媒体条件确定显示图像的大小，而不是发送给浏览器的图像。

有没有办法指导浏览器使用哪种尺寸？

我有一个奇怪的问题，浏览器说服务器在图像上返回 404。

但是直接访问 URL 会显示图像。图像在<picture>元素内，加载顺序略有不同。这可能是原因，如果是，为什么？可以缓存吗？

这是网站： https ://www.vamoney.squareballoon.co.uk/

这是我在那个网站上的代码：

浏览器说图像是 404。但是直接访问一个（最简单的方法是单击img=src显示图像上的那个。

https://www.vamoney.squareballoon.co.uk/images/aspirational-photos/borrow--va-money-main-image--479.jpg

它怎么可能既是 404 又是可见的？这一定是我正在做的愚蠢的事情吗？

我有一个在 Catalina 上的 Safari 14 上工作的图片元素。

它在一个图片元素中使用两个来源。第一个是webp，第二个是jpg。Safari，因为它不支持 webp，所以曾经回退到 jpg。

在新的 Big Sur 操作系统中，它不会回退，而是显示错误。网络选项卡显示其正在下载 webp（加载失败）。

我的代码有一个codepen。 https://codepen.io/yhattav/pen/YzNgBeV

它由两个图片元素组成：

1. webp 源，jpg 源，img 标签。
2. jpg 源，webp 源，img 标签。

为了让它更明显，webp 是粉红色的，而 jpg 是绿色的。

在chrome中，它显示粉红色和绿色，因为它支持webp。在 Catalina 上的 safari 中，它显示绿色和绿色，因为它不支持 webp。

我已经阅读了 webp 支持应该已经添加到新版本中。 https://www.macrumors.com/2020/06/22/webp-safari-14/ 难道是浏览器“认为”它支持 webp 而实际上不支持？

谢谢你的帮助。

我的客户报告说他看到他的 Mac 上显示了错误的图像。

它在我的 PC 上的多个浏览器中运行良好，因此问题出在 Safari 或 Mac 上。

谁能指出为什么会这样？

桌面版 - 可在 PC 上使用 - 图片已缩小

Mac 版 (Safari) - 移动版使用并被放大并且质量非常低，因为它太拉伸了