Изменить фоновое изображение динамически

Question

Я хотел бы изменить изображение в фоновом режиме с помощью комментария.

Изображения получены из API tmdb.Поэтому я думаю, что вам нужно создать компонент фонового изображения и передать его по URL.

Я знаю, что CSS имеет свойство background-image, но оно работает для статических изображений ...

Каков наилучший метод, я хотел бы сделать этот компонент многоразовым.

Answer 1

Сделав это, у меня есть фон.Но мне не удалось сделать это с многоразовым компонентом

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

Answer 2

Вот как вы должны это сделать.

1. Создайте <div> и style со значением по умолчанию background-image
2. Создайте 3 <button> длязапускает вашу функцию changeImage() и предоставляет параметр
3. Измените 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>

Если у вас есть какие-либо вопросы, пожалуйста, задавайте!