要求函数不与反应中的图像一起工作

Question

我在React中多次使用<img src={require('./somRelativePath/image.jpg)}。然而，这一次似乎不起作用。没有任何错误(例如没有找到图像等(，但网站上的损坏图像。

在检查了元素后，我对浏览器中的转写结果感到有些困惑：

<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}

---

解释：

let image1require('./somRelativePath/image.jpg')的值与import calendarPic from './somRelativePath/image.jpg';

如果对它们进行控制台操作，则calendarPic中的值是一个路径，但如果使用require，则该值是类似于此处的对象。

Answer 2

我想问题出在图像的位置上。当您使用create-react-app时，应用程序将捆绑到public文件夹中。然后require语句将开始获取图像——在这种情况下，相对于public文件夹，而不是src文件夹。

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

Answer 3

上面的答案对我都不起作用。相反，我在img标签外使用了require(path)，并将其分配到一个变量中，然后在img标签src内使用了该变量。它就是这样工作的。

const F = {
name: "Weiß",
image: require('./images/0453-Eastbourne-F961-F01.png')
}

图像标签内部：

src = { F.image }