Viewing an image inside img tag using webpack in react is returning an object%20 module

Question

I am passing an image name (this.props.backgroundImg) as a prop to a component (which points to "justice.jpg"). In the recipient component, i am appending the relative path using template literal to the src attribute in an img tag. So far so good.

When the page is rendered by the browser, there is no error but in Network chrome browser tool, i see an Object%20module instead of the image file.

The filename being constructed using the relative path and template string literal does point to the image file as there is no 404 file not found error.

Please let me know what i am missing here with the right explanation for better understanding?

The image does get rendered on the browser when i import the file "landingPageBkg"

The Component code is following.

import React from 'react';
//import landingPageBkg from '../../../public/assets/justice.jpg'


class LandingPage extends React.Component {

    componentDidMount() {
        setTimeout(()=>{
            this.props.history.push('/pagenotfound');
        },30000)
    }



  render() {
    console.log(typeof `../../../public/assets/${this.props.backgroundImg}`)
    return (
      <div className="landingPageImg">
      <img src={require(`../../../public/assets/${this.props.backgroundImg}`)} className="landingPageImg"/>    
        </div>
    );
  }
}

export default LandingPage;

Webpack url loader config:-

    module: {
        rules: [
            {
                loader: 'babel-loader',
                test: /\.js$/,
                exclude: /node_modules/,
            },
            {
                test: /\.s?css$/,
                use: ['style-loader',
                'css-loader', 'sass-loader'],
            },
            {
                test: /\.(jpe?g|png|gif|woff|woff2|eot|ttf|svg|jpg)(\?[a-z0-9=.]+)?$/,
                loader: 'url-loader',
            },

        ],

Answer 1

You are getting an image via props (which will run in production mode). Webpack has no idea of what’s gonna happens after the build(therefore, won’t be able to determine the name/chunk of the image you’re getting). You should better host these images you want somewhere else and then, get their reference via props.

import React from 'react';
import image1 from '../../../public/assets/image1.jpg'
import image2 from '../../../public/assets/image2.jpg'
import image3 from '../../../public/assets/image3.jpg'





class LandingPage extends React.Component {

    componentDidMount() {
        setTimeout(()=>{
            this.props.history.push('/pagenotfound');
        },30000)
    }



  render() {

    return (
      <div className="landingPageImg">
      <img src={this.props.backgroundImage} className="landingPageImg"/>    
        </div>
    );
  }
}

export default LandingPage;


// usage: 


<LandingPage backgrounImage={image1} />