React Images NOT Loading…

React Images NOT Loading…

The last two projects I’ve worked on have something in common.

Both of them have had an issue with the Images not loading.

Be it from a folder or from an API, both of them would just display that icon, you know the one I’m talking about. That icon that’s shown when an image doesn’t show.

I’ve been through several stackoverflows, reddit’s, codegreppers, youtube vids, and other blogs.

Some have suggested the usual:

verify the path is correct

import logo from ‘./logo.png’;

verify that you’re importing it correctly

import logo from ‘./logo.png’;

use require

<img src={require(‘/images/image-name.png’)} />

Install modules and add Webpack info:

Another way to do:

First, install these modules: url-loader, file-loader

Using npm: npm install — save-dev url-loader file-loader

Next, add this to your Webpack config:

module: {

loaders: [

{ test: /\.(png|jpg)$/, loader: ‘url-loader?limit=8192’ }



limit: Byte limit to inline files as Data URL

You need to install both modules: url-loader and file-loader

Finally, you can do:

<img src={require(‘./my-path/images/my-image.png’)}/>

You can investigate these loaders further here:



getting errors like:

“Uncaught Error: Cannot find module ‘./Logo.png’”

move the image folder from Public to src

and plenty others

the only suggestion that has worked so far is moving the image folder from Public to src.

This solves the issue if the images are local but it does not solve the issue if the images are from an api.

I haven’t found the solution yet, but I’m gonna keep on looking, I can’t let it affect more of my projects.

Here are some of the sites I visited but didn’t really help.

This blog is going to be on going…

Stay tuned.

Hello, I am a young enthusiastic Software Engineer. Looking forward to an opportunity to use my skills for mutual benefits and growth as well.