javascript - 使用 require('...') 在 react js 中动态导入图像不再起作用
问题描述
我有旧项目可以使用
<img src={require('./logo.svg')} className="App-logo" alt="logo" />
Bu 我使用 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"
}
解决方案
我解决了。
requires('...') 现在返回一个对象,因此您的图像将使用默认键,如下所示
<img src={require('./logo.svg').default} className="App-logo" alt="logo" />
我不知道为什么这被改变了。
推荐阅读
- python - 如何通过单击 QPushButton 移动到下一个选项卡(或导航到另一个选项卡)?
- python-3.x - 在 Jupyter Notebook 中运行 Python 3 但出现内核错误
- windows - MATLAB 的多个 Slamtec LIDAR 连接问题
- botframework - 如何使用 azure 认知搜索从网络链接中阅读匹配?
- java - 使用带有 ACTION_CALL 的意图呼叫 911 时移动到拨号屏幕
- python - 使列表中所有列表的长度相等?(Python)
- excel - 用分隔符总结单元格的公式
- azure - 如何使用 Azure 应用配置 REST API
- javascript - 如何将 exec 转换为 spawn?
- javascript - HTML:跨浏览器将表格列中的所有值加粗