Question

我设置了config-overrides.js，并且有一个资产文件夹，其中包含我的图像文件夹。当我尝试调用图像时，它没有显示。

我尝试使用require()，但不起作用。

这是我的config-overrides.js

const path = require('path');

module.exports = function override(config, env) {
    const aliasses = {
        Main: path.resolve(__dirname, './src/'),
        Component: path.resolve(__dirname, './src/components'),
        Assets: path.resolve(__dirname, './src/assets'),
        Layouts: path.resolve(__dirname, './src/layouts'),
        Routes: path.resolve(__dirname, './src/routes'),
    };

    config.resolve.alias = {
        ...config.resolve.alias,
        ...aliasses
    };


    return config;
  }

我的图片

<img src="Assets/images/image.png" alt=""  />

更新：

这是我的项目的package.json：

    {
  "name": "secrethaha",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "antd": "^3.19.2",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-scripts": "3.0.1"
  },
  "resolutions": {
    "ajv": "6.9.1"
  },
  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test --env=jsdom",
    "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": {
    "babel-plugin-import": "^1.12.0",
    "less-loader": "^5.0.0",
    "react-app-rewired": "^2.1.3"
  }
}

我最近添加的是react-app-rewired。

Answer 1

如果您已配置url-loader，则可以直接import映像，或者如果您使用CRA，url-loader已经配置为现成的

import MyImg from './Assets/images/image.png';

<img src={MyImg} alt="My image" />

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192,
            },
          },
        ],
      },
    ],
  },
};

ReactJS：本地图像未加载（使用替代路径）

1 个答案: