需要功能不适用于反应中的图像

Question

我<img src={require('./somRelativePath/image.jpg)}在 React 中使用过很多次。不过，这次好像不行了。没有任何错误（例如找不到图像等），但网站上的图像损坏。

检查元素后，我对浏览器中的转换结果有些困惑：

<img src="[object Module]" style="width: 5rem;">

看起来好像它将图像作为组件而不是实际文件加载。我已经创建了该应用程序，npx create-react-app但到目前为止还没有弹出它。所以在 babel 或 webpack 配置中没有错误，因为它目前是由 react 在后台处理的。

用import语句导入它工作得很好：

import calendarPic from '../assets/pictures/calendar.svg';

不幸的是，这不是解决方案，因为我将本地图像保存在 json 中，并且加载所有 50 个图像肯定会非常重复且无效。

同样，npx create-react-app我以前做过一些小项目，但从未遇到过如此令人困惑但如此基本的错误。我将非常感谢您的任何回应，因为我已经浏览了整个互联网上的所有可能的解决方案。

再次感谢您，祝您有美好的一天！

Answer 1

使用这个，它对我有用

<img src={require('./somRelativePath/image.jpg').default}

解释 ：

值 fromlet image1require('./somRelativePath/image.jpg')是不同的 import calendarPic from './somRelativePath/image.jpg';

如果您安慰他们，则 value fromcalendarPic是一个路径，但如果您使用require，则 value 是一个对象，例如 here。

Answer 2

我猜问题是图像的位置。当您使用create-react-app该应用程序时，该应用程序将被捆绑到该public文件夹​​中。然后该require语句将开始获取图像 - 在本例中是相对于public文件夹而不是相对于src文件夹。

我建议您尝试将图像移动到文件public夹中，并尝试使用src相对于该public文件夹的 URL。演示在这里