Question

此问题曾被问过，但没有给出解决方案。至少没有什么能解决我的问题。

在React中，图片标签不起作用。它是用JSX中的纯HTML编写的。没有函数，没有变量等。只是普通的硬编码标签。

它无法加载本地图像和在线图像。

我已经在JSX文件中复制了相同的html并粘贴到html文件中。完美呈现的html文件。

这是下面的代码段，可以通过React在html文件中而不是jsx文件中呈现。

<picture className="dice">
  <source id="img512" className="img512" media="" srcSet="./512x512.png" />
  <source id="img256" className="img256" media="" srcSet="./256x256.png" />
  <source id="img144" className="img144" media="" srcSet="./144x144.png" />
  <source id="img96" className="img96" media="" srcSet="./96x96.png" />
  <img src="./512x512.png" alt="Icon" />
</picture>

我尝试了一个源标签。我试着删除每个属性，包括srcSet。我尝试使用src而不是srcSet，还尝试了srcset。所有渲染图像均失败。唯一呈现的是替代文本。

我在这里错过了什么吗？是否有React不喜欢我在这里所做的事情？

这是我发布之前最初阅读的帖子的链接： picture tag in React

更新：

因此，正如“ Jesper We”提到的那样，我使用的是className而不是class。我个人已经知道这是一个常见错误，并且会发现该错误。由于我早期发布了错误的代码，因此为了确认起见，我再次运行了该代码。不幸的是，仍然没有图片

我致力于“罗宾”的评论，并查看他的建议。我复制了他在链接中提供的代码，并将其粘贴到我的代码中。一切正常。然后，我填写了原始代码的媒体查询。奇怪的是它没有用。然后我使用了其他在线图像，然后这些图像起作用了。我尝试了png和jpg图像，两者都起作用。然后我再次使用了自己的图像，这些图像是png图像，但没有一个起作用。

现在看来我的图像有些问题，但是我认为问题不再围绕代码解决。我希望...

Answer 1

您需要修改代码，然后它才能正常运行，请参见此代码 https://stackblitz.com/edit/react-jessyq

调整输出窗口的大小，您将看到不同大小的不同图像。希望您的问题得到解决。快乐编码：）

图片标签用于响应图像，据我所知图像将根据设备宽度而变化。为此，您应该在图片查询中使用图片标签

<picture>
  <source media="(min-width: 650px)" srcset="img_pink_flowers.jpg">
  <source media="(min-width: 465px)" srcset="img_white_flower.jpg">
  <img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>

有关详细信息：https://www.w3schools.com/tags/tag_picture.asp

您不能在反应中使用类，请使用 className 代替类。

图片标签不喜欢React吗？

1 个答案: