require 函数无法在反应中处理图像

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是一个路径，但如果您使用，则该值是一个像here这样的require对象。

Answer 2

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

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

Answer 3

上面的答案都不适合我。require(path)相反，我在 tag外部使用img并将其分配给一个变量，然后在imgtag内部使用该变量src。它就是这样工作的。

const F = {

  name: "Weiß",

  image: require('./images/0453-Eastbourne-F961-F01.png')

}

图像标签内：

src = { F.image }