Local image not loading in React

Question

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!

what is the url rendered in browser? Wat happens when you go the url in a new tab ? any network error while transfer ? — Panther, Dec 02 '17 at 04:57
the url is `/images/weatherImg_6281b3f.png` and when I goto that url in a new tab i just get a blank black screen show up. When I goto the network tab I get a status 304 — doctopus, Dec 02 '17 at 06:35
Unrelated but it is ideal to not use a `class` when there is not state to manage in the component. Just use a simple `function()` — Ben Rondeau, Dec 02 '17 at 08:15
Hope this answer will help you out. [Refer this answer](https://stackoverflow.com/a/61783390/11225762) — Mokesh S, May 13 '20 at 19:41

score 1 · Answer 1 · edited Feb 29 '20 at 18:27

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() {
      //...
    }
  }

I added `width='400' height='500'` and i can see the outline of the image, but it's a broken image. And when I put in the console logs, it's calling `componentDidMount()` but not `componentWillUnmount()` — doctopus, Dec 02 '17 at 06:37

score 0 · Answer 2 · answered Jul 14 '20 at 22:54

0

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

answered Jul 14 '20 at 22:54

Dory Daniel

798
14
21

Local image not loading in React

2 Answers2