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:
url-loader: https://www.npmjs.com/package/url-loader
file-loader: https://www.npmjs.com/package/file-loader
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.
https://teamtreehouse.com/community/reactjs-i-cant-load-local-images
https://newbedev.com/react-won-t-load-local-images
https://stackoverflow.com/questions/34582405/react-wont-load-local-images
https://www.codegrepper.com/code-examples/javascript/image+react+not+showing
https://www.reddit.com/r/reactjs/comments/ikkej4/react_doesnt_load_local_images/
https://stackoverflow.com/questions/34582405/react-wont-load-local-images
https://www.youtube.com/watch?v=ay6id01369s
This blog is going to be on going…
Stay tuned.
