React 中的图片标签

IT技术 html reactjs
2021-05-07 12:39:36

我试图在react应用程序（jsx 文件）中使用图片标签，但它似乎不起作用。这是我的代码

 <picture>
      <source media="(min-width: 1024px)" src="image_Desktop.png"/>
      <source media="(max-width: 768px)" src="image_Mobile.png"/>
      <source media="(min-width: 768px) and (max-width: 1024px)" src="image_Tab.png"/>
      <img src="image.png" alt="" styleName='brain-image'/>
 </picture>

我尝试在源标记中将属性作为 srcset/src 提供，但仍然无法正常工作。上述问题的任何解决方案？

2个回答

如果您使用 srcset 而不是使用 srcSet（大写），这可能是您的问题。

这是使用 srcset 引起的另一个问题：

为什么 React.js 删除 <img /> 上的 srcset 标签？

根据官方文档：

HTML<picture>元素是一个容器，用于为其中包含的特定元素指定多个元素。浏览器将根据页面的当前布局（图像将出现在其中的框的约束）和将在其上显示的设备（例如普通或 hiDPI 设备）选择最合适的来源。

而 img 是一个 DOM 元素，而是一个 javascript 表达式。

这个React img 标签问题可能与 url 和 class重复

如果这对您没有帮助，请分享此组件的已检查 HTML

其它你可能感兴趣的问题
上一篇我们如何在多个选项卡（页面）中使用相同的状态？ 下一篇React.js：不能再“返回假”了......有没有等价的？