Dynamically Loading Local Images with ReactJS

Question

I'm trying to render several images from an array, passed onto an "Image" component as a property. However, for whatever reason, the local images I would like to render are not showing up. If I load an image hosted at a web address, that image will show up, indicating that there is nothing wrong with the "imageSource" property being passed onto the Image component. I have tried playing with the source format like so:

let source = 'require(./img/' + props.imageSource + ")";

or trying:

<img src={{uri: source}} role="presentation" style={style.image} />

...but nothing I do makes any difference.

The component is as seen below. I am totally stuck, so help would be much appreciated!

import React from 'react';

let Image = function statelessFunctionComponentClass(props) {

  let source = './img/' + props.imageSource;

  const style = {

    image : {

      width: '400pt',
      height: '400pt'
    }
  }

  return (

    <img src={source} role="presentation" style={style.image} />
  )
}

export default Image

Answer 1

You can include the folder of images by creating a new context with require.context(). From there, you can dynamically access the image you want from that folder, and set it as a src.

Going off of a structure like this:

APP
├──webpack.config.js
├──src
     ├──containers
        ├──YourContainer.js
     ├──components
        ├──YourComponent.js
├──public
     ├──bundle.js
     ├──images
           ├──dog.png
           ├──cat.png

In YourContainer.js, you want to create a new context to require that images directory

const images = require.context('../../public/images', true);

From there, you can reference an image specifically:

const dog = images('./dog.png');

or dynamically:

let animal = images(`./${someVariable}.png`);

For a more full example, here's how you can do it while iterating over an object, using the keys to pull your image, and passing that as a style prop to a child component:

let YourContainer = ({ dispatch }) => {
const data = projectData["projectData"];

// Require context image folder
const images = require.context('../../public/images', true);


return (        
    <div className="container-fluid">
        <Row>
            {
                // Iterate over data object
                Object.keys(data).map((keyname, keyindex)=> {

                    let code = data[keyname]["code"];
                    let title = data[keyname]["title"];
                    // Dynamically reference image
                    // Set as inline style
                    // Pass as prop to child
                    let imgsrc = images(`./${code}.png`);

                    let styler = {
                        backgroundImage: `url(${imgsrc})`
                    }

                    return <YourComponent 
                                key={keyindex}
                                title={title} 
                                style={styler} 
                            />
                })
            }   
        </Row>      
    </div>  
)   
}

Answer 2

Seeing as this question has not been answered, and i was too searching for the answer,

I came across a nifty trick to load images using just a url

Assuming you are using create-react-app plugin

You can use the public folder to render images dynamically

for example, if you put an image with the name "image.jpg" in the public folder of your react app.

you can load it by doing the following

<img src={`${process.env.PUBLIC_URL}/image.jpg`} />

More information can be found below. https://create-react-app.dev/docs/using-the-public-folder

Answer 3

Mention the image folder path where you have a images. I have created the folder under the 'SRC' folder. So i keep my code like below.

let images = require.context('../../../assets/images', true);

let itemImg = images(`./${dynamicObject.photo}`).default;

default is main keyword.