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

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!

CodePudding user response：

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>