ReactJS: локальные изображения не загружаются (с использованием пути из переопределений)

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"
  }
}

Мое последнее добавление - это перереагирующая программа-приложение.

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,
            },
          },
        ],
      },
    ],
  },
};