React图片显示[object Module]而不是图片

Question

最近我将我的项目推送到Gitlab，这样我就可以在我的笔记本电脑上练习React了。 在我拉取并安装了所有内容后（不得不使用npm audit fix --force，这很奇怪），我尝试运行它。一切看起来都很好，但图片无法显示，当我检查时，它显示[object Module]。现在我已经搜索过了，大多数答案都说要更改选项为

options: {
      esModule: false,
    },

在webpack中

事实上，我认为我从未使用过webpack，在我的桌面电脑上它运行得很好（我没有webpack.config.js）。这是我的package.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": {}
}

- C.Ronaldo

Answer 1

我使用“default”属性来访问字符串值（路径）：

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

这个方案我从Carlos Avila在vuejs GitHub问题的评论中获取。

- David Gaspar

---

谢谢，.default 是将其转换为字符串还是它实际上做了什么？ - C.Ronaldo

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。

之后，图像将会显示。

- Shibu