如何将从指针获取的图像放入背景中？

Question

我有这段代码，可以从 src 获取图像：

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

当我想在我的 CSS 代码中使用该图像时，问题就来了：

.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;
}

所以我不知道在这里做什么。

问题是，当我放置一个随机图像并将类名放在一个 div 中时，css 代码起作用了：

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

但是当我尝试使用正确的图像（因为图像会根据我们正在谈论的事件而变化）时，它就不再有效了！

Answer 1

使用style属性更新元素的 CSS：

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

例子：

 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>