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

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

文件夹中，并尝试使用

src

以及相对于

public

文件夹的 URL。 演示在这里

Answer 3

以上答案都不适合我。相反，我在

require(path)

标签外部使用

img

并将其分配给变量，然后在

img

标签

src

内使用该变量。就是这样工作的。

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

图片标签内：

src = { F.image }