动态更改背景图片

Question

我希望通过评论来修改背景图片。

这些图片来自于tmdb API。因此，我认为您需要创建一个背景图片组件，并将其传递给URL。

我知道CSS有background-image属性，但它仅适用于静态图像...

最佳方法是什么？我想使此组件可重复使用。

- FoxaLiveJS

---

为什么不直接使用<img src="yourimg" />呢？ - Jonas Wilms

做 <element style={{backgroundImage: this.state.url}}><element>，其中 element 可以是 div 或 span 或其他任何元素。 - evgeni fotia

你已经完成了哪些步骤，但是无法实现呢？ - r3zaxd1

我尝试在组件中的 div 中使用 img 标签，但是我不知道如何设置背景图片。 - FoxaLiveJS

Answer 1

以下是操作步骤：

1. 创建一个含有默认 background-image 样式的 <div>
2. 创建3个 <button> 触发你的函数 changeImage() 并提供参数
3. 使用 JavaScript 更改 style.backgroundImage，如下所示：

function changeImage(category){
  document.getElementById('div-bg').style.backgroundImage = 'url("https://source.unsplash.com/320x240/?' + category + '")';
}

#div-bg {
  display: block;
  width: 320px;
  height: 240px;
  background-image: url("https://source.unsplash.com/320x240/?sky");
}

<div id="div-bg"></div>

<button onclick="changeImage('nature')">Nature</button>
<button onclick="changeImage('animal')">Animal</button>
<button onclick="changeImage('fire')">Fire</button>

如果您有任何问题，请问！

- Jonathan Gagne

---

非常感谢，我会尝试这个。我原本没有计划使用按钮，只是传递一个名为“image-url”的props，其中包含路径。 - FoxaLiveJS

这只是为了解释你所要求的内容。如果您愿意，可以仅使用document.getElementById('div-bg').style.backgroundImage = 'url("https://source.unsplash.com/320x240/?' + category + '")';。该示例展示了如何实现它。 - Jonathan Gagne

非常感谢您的帮助，我已经将解决方案放在这个位置。 - FoxaLiveJS

任何时候，都很愉快！ - Jonathan Gagne

Answer 2

通过这样做，它可以工作，我有了我的背景。但是我没有成功地使用可重用组件来完成它。

import React from 'react';

  const VideoDetail = ({ title, description, background }) => {

  const IMAGE_BASE_URL = "https://image.tmdb.org/t/p/w500/";

  const backgroundStyle = {
    color: 'white',
    backgroundRepeat: 'no-repeat',
    backgroundAttachment: 'scroll',
    backgroundPosition: 'center',
    backgroundSize: 'cover',
    width: "100%",
    height: "400px",
    backgroundImage: `url(${IMAGE_BASE_URL}${background})`
 };

 return(
    <div>
      <div style={background !== undefined ? backgroundStyle : null }>
        <h1>{title}</h1>
        <p>{description}</p>
      </div>
  </div>
  )
} 
export default VideoDetail;import React from 'react';

- FoxaLiveJS