CODEWITHSUNDEEP
javascriptreactjs
António Lima
António Lima

Reputation: 94

How to write the correct syntax for backgroundImage in ReactJs?

I'm trying to define a 's backgroundImage in a map() function but I can't understand what the correct syntax is to add one:

I have a variable named value that stores a file's name and I want to insert uploads/ in my backgroundImage because it's the folde where I want the backgroundImage to fetch the images.

I've tried:

<div className="image-show" key={index} style={{backgroundImage: URL({'uploads/' + value})}}>

But it returns the following error:

Error

Thanks in advance

Upvotes: 2

Views: 106

Answers (4)

Terry T&#250; Nguyễn
Terry T&#250; Nguyễn

Reputation: 380

CSS style fields that you pass in components must have value in number or string.

Instead of style={ {backgroundImage: URL({uploads/12345})} }

React expects style={{backgroundImage: "url(uploads/12345)" }}

I hope that helps

Upvotes: 0

Abhishek Kulkarni
Abhishek Kulkarni

Reputation: 1767

Try this:

<div className="image-show" key={index} style={{backgroundImage: "url(uploads/" + value + ")" }}>

The general syntax is :

backgroundImage: "url(" + background_image + ")"   

--- where background_image is a string(path of  your image)

Upvotes: 0

oreopot
oreopot

Reputation: 3450

Replace: {'uploads/' + value}

with the following:

{ `uploads/${value}`}

Upvotes: 0

Vivek Doshi
Vivek Doshi

Reputation: 58573

You can try out :

style={{backgroundImage: "url(uploads/" + value + ")" }}

//OR

style={{backgroundImage: `url(uploads/${value})` }}

Upvotes: 2

Related Questions