How can I put an image that I get from a pointer into the background?

December 24, 2022

I have this code where I get an image from a src:

<img src={event.eventData?.foto_portada} />

The problem comes when I want to use that image in my CSS code which is:

.background-image {
  background-image: url();
  filter: blur(100px);
  -webkit-filter: blur(100px);
  height: 100%;
  width: 100%;
  opacity: 0.33;
  pointer-events: none;
  left: 0;
  position: absolute;
  right: 0;
}

So I don’t know what to do here.

The thing is, the css code worked in when I put a random image and put the class name at a div like this:

 <div className="background-image"></div>

But when I’ trying to do it with the correct image (because the image changes depending on the event we are talking about) it no longer works!

>Solution :

Use the style prop to update the element’s CSS:

<div className="background-image" style={{
  backgroundImage: `url(${event.eventData?.foto_portada})`
}}></div>

Example:

const Example = ({ url }) => (
  <div className="background-image" style={{
    backgroundImage: `url(${url})`
  }}></div>
)

const url = 'https://picsum.photos/200/300'

ReactDOM
  .createRoot(root)
  .render(<Example url={url} />)

.background-image {
  filter: blur(5px);
  height: 100%;
  width: 100%;
  opacity: 0.33;
  pointer-events: none;
  left: 0;
  position: absolute;
  right: 0;
}

<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>

<div id="root"></div>