问题标签 [picture-element]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
890 浏览

html - 当图像实际上是图片标签时,如何为图像定义微数据标记?

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

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

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

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

0 投票
0 回答
60 浏览

javascript - 如何在完全加载之前获取图片元素的所选来源?

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

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

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

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

0 投票
1 回答
334 浏览

javascript - 在 Chrome 中,img 元素的 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

0 投票
0 回答
38 浏览

html - 图片元素中的源标记不接受 HTML 中的本地路径

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

0 投票
1 回答
101 浏览

html - 响应式图片元素从 srcset 下载正确尺寸的图片

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

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

0 投票
1 回答
112 浏览

image - 加载资源失败:服务器响应状态为404()但访问url直接显示图片

我有一个奇怪的问题,浏览器说服务器在图像上返回 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 又是可见的?这一定是我正在做的愚蠢的事情吗?

0 投票
1 回答
1033 浏览

html - Big Sur 上的 Safari 14 不加载 webp,也不回退到其他提供的源

我有一个在 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 而实际上不支持?

谢谢你的帮助。

0 投票
0 回答
11 浏览

image - 元素在 Mac 上的 Safari 中选择移动版本

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

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

谁能指出为什么会这样?

桌面版 - 可在 PC 上使用 - 图片已缩小 PC 上的图片元素显示缩小的图像

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