动态更改背景图像

Question

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

这些图像来自 tmdb API。 所以我认为你必须创建一个背景图像组件并将其传递给URL。

我知道CSS具有背景图像属性，但它适用于静态图像...

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

Answer 1

这是你必须如何做到这一点。

1. 使用默认background-image创建<div>及其style
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>

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

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