Reactjs中无法使用require()导入图片

Question

事情是这样的，当我打开我的反应项目时，所有图像都停止出现，这突然发生了，因为它在几个小时前正在工作。这似乎是它们导入方式的问题，我一直使用的方法是src={require(./Picture)}，我也尝试过const logo = require('logo')  src={logo}，import logo from './logo.png'唯一有效的方法是最后提到的。在调试时，每个谷歌都认为问题出在一个名为 webpack 的依赖项上，我尝试删除并重新安装它，还安装了旧版本，但没有任何效果。知道是什么原因造成的吗？

Answer 1

如果您使用create-react-appandrequire导入图像，require则返回 ES 模块而不是字符串。这是因为file-loader该esModule选项默认启用。

只需确保您通过以下方式之一导入图像：

const image = require('../path/to/image.jpg').default;

// OR

import image from '../path/to/image.jpg';

所以

• src={require(./Picture)}应该src={require(./Picture).default}

• const logo = require('logo')应该const logo = require('logo').default

• import logo from './logo.png'应该可以工作