React img显示[object Module]而不是图像

Question

最近我把我的项目推到了Gitlab，这样我也可以在笔记本电脑上练习我的React。在我拉和npm安装了所有东西之后(不得不使用npm audit fix --force，这很奇怪)，我试着运行它。一切看起来都很好，但图像不会显示，当我检查它，它说[对象模块]。现在我用谷歌搜索了一下，大多数答案都说要把选项改为

options: {
esModule: false,
},

在webpack

问题是，我想我从来没有使用过webpack，在我的桌面上它工作得很好(我没有webpack.config.js)。这是我的包裹。Json，和我笔记本上的一样:

{
"name": "test",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.3.2",
"@testing-library/user-event": "^7.1.2",
"axios": "^0.19.2",
"bootstrap": "^4.5.0",
"cors": "^2.8.5",
"node-sass": "^4.14.1",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-scripts": "3.4.1",
"react-select": "^3.1.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {}
}

Answer 1

我使用'default'属性来访问字符串值(路径):

<img 
src={require("../../assets/images/svg/shopping-cart.svg").default}
alt="Shopping cart"/>

这个解决方案是我从Carlos Avila对vuejs GitHub问题的评论中得到的。

Answer 2

要更改此设置，请转到node_modules/react-scripts/config/webpack.config.js

{
test: [/.bmp$/, /.gif$/, /.jpe?g$/, /.png$/],
loader: require.resolve('url-loader'),
options: {
limit: imageInlineSizeLimit,
name: 'static/media/[name].[hash:8].[ext]',
esModule: false
},
}

找到上面的行并在选项中添加esModule: false。

之后，图像将显示。