ReactJS: Local images not loading (Using path from overrides)

Question

I set up a config-overrides.js and I have an assets folder that contains my images folder. When I try to call an image, it does not show up.

I tried using require() but it doesn't work.

Here is my 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;
  }

My image

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

UPDATE:

Here is the package.json of my project:

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

My latest addition is the react-app-rewired.

try to append / at the end of the relative path i.e Assets: path.resolve(__dirname, './src/assets/'), — Vishal Rajole
– Vishal Rajole, Commented Jun 18, 2019 at 3:35
@VishalRajole I tried to append / but it's not working as well — danedelions_swift
– danedelions_swift, Commented Jun 18, 2019 at 3:42
@DanielaEchavez CRA already configured with url-loader you should be able to import the images directly as i showed in my answer, Have you tried it ? — Asaf Aviv
– Asaf Aviv, Commented Jun 18, 2019 at 4:00

Asaf Aviv · Accepted Answer · 2019-06-18 04:09:54Z

3

If you have url-loader configured you can import the image directly, or if you use CRA url-loader is already configured out of the box

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

edited Jun 18, 2019 at 4:09

answered Jun 18, 2019 at 3:39

Asaf Aviv

11.8k2 gold badges33 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Daniel Lizik Over a year ago

depends on OP's webpack/babel setup

Asaf Aviv Over a year ago

@DanielLizik You're right, my bad to assume it's already configured.

Collectives™ on Stack Overflow

ReactJS: Local images not loading (Using path from overrides)

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related