Question

我想在评论的帮助下修改背景图片。

图像来自tmdb API。因此，我认为您必须创建一个背景图像组件并将其传递给URL。

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

什么是最好的方法，我想使此组件可重用。

Answer 1

这是您必须执行的操作。

使用默认的<div>创建您的style及其background-image
创建3个<button>来触发您的函数changeImage()并提供一个参数
将style.backgroundImage更改为JavaScript，如下所示：

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>

如有任何疑问，请询问！

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';

动态更改背景图像

2 个答案: