<picture /> 元素在 Safari 浏览器中无法正常工作，同时使用 React答案

【问题标题】：<picture /> element is not working as expected in Safari browser, while using React<picture /> 元素在 Safari 浏览器中无法正常工作，同时使用 React
【发布时间】：2021-11-09 15:26:02
【问题描述】：

我在 React 中遇到了“图片”元素的问题，尤其是 safari 浏览器。 Safari 总是从“img”元素 src 中获取图像，并根据媒体属性从适当的“源”元素中获取图像。

这似乎在其他浏览器（chrome 和 firefox）中运行良好。

我为此创建了一个codesandbox。

不胜感激。提前致谢。

仅供参考：我也尝试过使用 picturefill polyfill。但没有帮助。所以，认为这与 react + safari 引擎组合有关。

【问题讨论】：

它适用于我的野生动物园。
嗨，艾哈迈德，Safari 是否只从“img”标签中获取合适的 src 而不是 src？我正在使用 Safari 版本 13.0.4 (15608.4.9.1.3)。它正在获取正确的“source”元素 src 和“img”元素 src。
你解决了这个 Suresh 问题吗？我也遇到了同样的问题
在我的情况下，当使用 React 或 Vue 动态生成图片元素时会出现问题，如果 html 是静态的，则没有问题。
更多信息见github.com/vuejs/vue/issues/11357

标签： html reactjs image picturefill

【解决方案1】：

对于它的价值，我在 Safari 上缩小了我的问题：似乎可以使用 vanilla 元素，但是当我有一个 HTML 自定义元素并在模板的 InnerHTML 中创建图片标签时（document.createElement("template")。

我使用的是 Vanilla JS 而不是 React，但也许它正在做一些类似的事情。

我尝试了使用和不指定“类型”属性，但没有效果。

在 Chrome 上运行良好。 Safari 版本为 14.0.3 (16610.4.3.1.7)

【讨论】：

也许不能很好地回答。尝试确保在发布答案时，您有信心这样做可以解决问题。同样使用问题下的评论部分对建议和补充更有意义
非常感谢。我在 Safari 上也遇到过这个奇怪的错误。我在做document.createElement("template") 并且picture 标签不起作用。

【解决方案2】：

也许你忘记了source 元素的type 属性。这是我的问题。

【讨论】：

不，我为源元素添加了type。我在问题中附加了代码框 URL。