Setting inline backgroundImage is not working in React

Question

I am using a function which will return the full path of the image.

  const imagePath = (imagePath) => {
    const domainPath = "http://localhost:9005/gallery/original/";
    const fullImagePath = domainPath + imagePath;
    return fullImagePath;
  };

Now If I use below code, it will work and show image on browser:

<img
 src={imagePath(item.mediaPath)}
 alt="cow images"
/>

But If I use below code, it will NOT work:

<div
  className="bg-image-blur"
  style={{
    backgroundImage:
      "url(" +
      imagePath(item.mediaPath) +
      ")",
  }}
></div>

Please see given below image from my inspect element. Style is added to the element :

and It will also not work if I don't use imagePath function :

<div
  className="bg-image-blur"
  style={{
    backgroundImage:
      "url(" +
      "http://localhost:9005/gallery/original/" +
      id.mediaPath +
      ")",
  }}
></div>

What is the issue ?

Nick Vu · Accepted Answer · 2022-03-29 05:38:51Z

2

It does not work because you haven't put '' for url. And I'd suggest you use template literals for your string concat instead for easier look

<div
  className="bg-image-blur"
  style={{
    backgroundImage: `url('${imagePath(item.mediaPath)}')`,
  }}
></div>

You can check this document to understand how background-image looks like with url

edited Mar 29, 2022 at 5:38

answered Mar 29, 2022 at 5:30

Nick Vu

15.6k5 gold badges29 silver badges37 bronze badges

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

1 Comment

Abhishek Kamal Over a year ago

Yes, I am already using template string. I just wrote an example here without template string

Collectives™ on Stack Overflow

Setting inline backgroundImage is not working in React

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related