CODEWITHSUNDEEP
reactjsimagepath
Elliptica
Elliptica

Reputation: 4322

Can't Render Image When Path Stored in React Variable

I have a lot of images I need to use in my react app, so I don't want to import them one by one. To that end, I'm using reqiure(). However, while require works when used like this below:

return <img src={require("./images/lets_go.png")} />

if I store that path in a variable:

let v = "./images/lets_go.png";
return <img src={require(v)} />

I get Error: Cannot find module './images/lets_go.png'

Why won't it allow me to use the path stored in a variable (it's the exact same path) and how can I make it work?

Upvotes: 0

Views: 1139

Answers (2)

Liam McKenna
Liam McKenna

Reputation: 11

this will work using a 'Partial' require, where you give the path as text and and the image name can be the varible. the reason this is happening is related to how webpack is meant to handle static paths.

What we know works, (static image path):

<img src={require("./images/lets_go.png")} />

Trying to make the path a varible like this we found does not work

let v = "./images/lets_go.png";

<img src={require(v)} />

What will work when trying to make the path a varible

 let v = "lets_go.png";

    <img src={require(`./images/${v}`).default} />

Note that .default needs to be added at the end of the require as of may/2021 due to a error related to react scripts. this might be fixed and not needed if you're reading this in the future.

you'll need to store all your images in the same folder of course, but this lets you dynamically load high volumes ofimages in react/js without needing to manually import them all into the code.

Upvotes: 1

Manu
Manu

Reputation: 10944

Either you may import the image and bind it to src attribute like its done in create-react-app with the logo as follows:

import logo from './logo.png' // relative path to image 

class Home extends Component { 
    render() { 
        return ( 
            <img src={logo} alt={"logo"}/> 
        )  
    }
}

Or, if you used create-react-app cli to create your project then your public folder is accessible. Just create the images or assets folder in public and you may access it in jsx as follows:

public/images/ -> store images here

<img src="/images/home.png" /> -> use it like this in jsx

Upvotes: 0

Related Questions