Dynamic image path in react

Question

In my React project (made using create-react-app), I have an array of objects with the following format:

items : [{
    id:"test",
    title:"Test title",
    project_url:"/project/test",
    doc:"2018",
    description:"test description",
    link:"example.com",
    background_img:"../../../s.png",
    color:"#333333"
}]

I map these objects into elements to be displayed on the page:

_generateItems() {
    return this.state.items.map((item) => {
        return (
            <div className="item">
            <h3>{item.title}</h3>
            <div className="device" style={{backgroundImage:`url(${item.background_img})`}}/>
            <Link to={item.project_url}><div className="info_btn"><h6>More info</h6></div></Link>
            </div>
        )
    })
}

My problem is that I cannot get background image of the inner div to work. After scouring the internet, I tried to use template literals like so:

`url(${item.background_img})`

This allowed the project to compile and run without errors, and inspecting the div in the browser, I can see that it has the correct style. The image however does not appear on the div.

I am guessing it has to do with the way webpack handles static resources like images when it builds the project. How can I make it work?

it may be that the url ../../../filename (which is relative) is not relative to the page you are on nor the css url. Can you switch the urls to absolute urls? /path/to/file (be aware of the leading /) ? — lemieuxster
– lemieuxster, Commented Aug 23, 2018 at 20:55

Dacre Denny · Accepted Answer · 2018-08-23 20:57:38Z

1

Are your images served statically? If so, you should have a Public folder in your project's root directory (seeing that you have used create-react-app to set up your project).

Place your images (ie s.png) in the Public directory of your project, and then revise your code as follows:

items : [{
    id:"test",
    title:"Test title",
    project_url:"/project/test",
    doc:"2018",
    description:"test description",
    link:"example.com",
    background_img:"/s.png", // Update the image path  
    color:"#333333"
}]

answered Aug 23, 2018 at 20:57

Dacre Denny

30.4k5 gold badges53 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

steliosbl Over a year ago

This worked right away. However I'd also like to know if its possible to have webpack handle them, like one would with a predetermined path (var img = require("/path/to/image"))

Dacre Denny Over a year ago

Great to hear that it worked - that is possible however I'm not sure why you would want to do that? In any case this might help you with that: stackoverflow.com/questions/31241734/… If you've found the answer above helpful please consider accepting :-)

steliosbl Over a year ago

Of course, I was just waiting for the timeout. I'll take a look at the linked thread. Thanks for the help.

Collectives™ on Stack Overflow

Dynamic image path in react

1 Answer 1

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Linked

Related