使用require('...')在不再工作的react js中动态导入图像

Question

我有一些旧的项目，这些项目都可以用

<img src={require('./logo.svg')} className="App-logo" alt="logo" />

但是我用create-react-app和require('...')创建了一个新项目不再有效。就像新版本不支持require一样，我该如何动态加载图片呢？

旧项目package.json

"dependencies": {
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.3.2",
"@testing-library/user-event": "^7.1.2",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-scripts": "3.4.3"
}

新建项目package.json

"dependencies": {
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-scripts": "4.0.0",
"web-vitals": "^0.2.4"
}

Answer 1

我解决了。

需要(‘...’)现在返回一个对象，因此您的图像将使用默认键，如下所示

<img src={require('./logo.svg').default} className="App-logo" alt="logo" />

我不知道为什么这个会被改变。

Answer 2

您可以通过以下方式导入镜像

import Logo from "./logo.svg";

<img src={Logo} className="App-logo" alt="logo" />