Local image not loading in React [duplicate] - image

Question

This question already has answers here:
Images not loading in React
(3 answers)
Closed 2 years ago.
Very new to storing local assets on React.
I've configured webpack with file-loader and image-loader and stored the images locally, but for some reason it doesn't seem to be showing:
import React, { Component } from 'react';
import WorkItem from './work-item';
import WorkItemsArray from './work-items-array';
class Work extends Component {
render() {
return (
<div id='work'>
<h1>Work</h1>
<img src={require('../images/weatherImg.png')}/>
<div id='portfolio'>
{WorkItemsArray.map(({ url, img, title, description, github }) => {
return (
<WorkItem
key={title}
url={url}
img={img}
title={title}
description={description}
github={github}
/>
);
})}
</div>
</div>
);
}
}
export default Work;
webpack.config.js
var webpack = require('webpack');
module.exports = {
entry: [
'./src/index.js'
],
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader'
},
{
test: [/\.css$/, /\.scss$/],
exclude: /node_modules/,
loaders: ['style-loader', 'css-loader', 'sass-loader']
},
{
test: /.*\.(gif|png|jpe?g|svg)$/i,
use: [
{
loader: 'file-loader',
options: {
name: 'images/[name]_[hash:7].[ext]'
}
}
]
},
{
test: /\.(gif|png|jpe?g|svg)$/i,
use: [
'file-loader',
{
loader: 'image-webpack-loader',
options: {
mozjpeg: {
progressive: true,
quality: 65
},
// optipng.enabled: false will disable optipng
optipng: {
enabled: false,
},
pngquant: {
quality: '65-90',
speed: 4
},
gifsicle: {
interlaced: false,
},
// the webp option will enable WEBP
webp: {
quality: 75
}
}
}
]
}
]
},
resolve: {
extensions: ['*', '.js', '.jsx']
},
output: {
path: __dirname + '/dist',
publicPath: '/',
filename: 'bundle.js'
},
devServer: {
contentBase: './dist',
historyApiFallback: true
},
plugins: [
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
})
]
};
FWIW, I'm not getting any errors at all, just that the image doesn't seem to be loading.
Any help greatly appreciated!

Answer 1

Since you assumed you didn't get any error, you have two possibilities: -
Either the image is not visible (maybe because of height and width are small)
Or the whole component <Work /> is not rendered, or even rendered, it is then unmounted without detecting the same.
For the first, force a specific size to the image or replace another image: -
<img src={require('../images/weatherImg.png')} width="400" height="500"/>
For the second, add a componentDidMount and componentWillUnmount and debug, then check the browser console: -
class Work extends Component {
componentDidMount() {
console.log(new Date(), ' Work is mouned 🙃');
}
componentWillUnmount() {
console.log(new Date(), ' Work will be killed 😭');
}
render() {
//...
}
}

Answer 2

let's say you have your images folder inside the public folder.
try:
<img src={require(process.env.PUBLIC_URL + "/images/dog.png")}
for others, if you aren't using webpack try:
<img src={process.env.PUBLIC_URL + "/images/dog.png"}