Добавить к текущему фоновому изображению через JS? - PullRequest
Новая
       22

Добавить к текущему фоновому изображению через JS?

0 голосов
/ 14 июля 2020

Я создал многослойное изображение в Photoshop. Я хотел бы добавлять один слой этого изображения к фону div каждую секунду. Это код, с которым я сейчас работаю, но он не работает. Любая помощь приветствуется. 

import React, { useRef, useEffect } from 'react';

import img1 from '../../img/INTRO/1.png';
import img2 from '../../img/INTRO/2.png';
import img2 from '../../img/INTRO/3.png';

function IntroMain() {
    const imageDiv = useRef();

    useEffect(() => {
        let arrOfImages = new Array(),
            i = 0,
            interval = 700,
            currentBG;
        window.setTimeout(() => {
            console.log('set bg img now');
            imageDiv.current.style.backgroundImage = `url(${img3})`;
            imageDiv.current.style.backgroundSize = `cover`;
            currentBG = `url(${img1}), `;
        }, interval);
        window.setTimeout(() => {
            console.log('set bg 2 img now');
            imageDiv.current.style.backgroundImage = `url(${img2})`;
            imageDiv.current.style.backgroundSize = `cover, cover`;
        }, interval * 2);
    });

    return <div id="image-div" ref={imageDiv}></div>;
}

export default IntroMain;

1 Ответ

1 голос
/ 14 июля 2020

Для установки нескольких фоновых изображений на div вы можете использовать свойство css background-image. Это выглядит так: 

background-image: url('/first/image.jpg'), url('second/image.jpg') ...;

Ваше приложение может хранить URL-адреса изображений и состояние отображения в массиве, который вы можете обновлять посредством взаимодействия с пользователем или в зависимости от времени. Затем вы можете динамически построить значение свойства css из URL-адресов изображений для отображения. Пример приложения: 

const IMAGES = [
  // this could be real paths instead
  /* red */ "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8BQDwAEhQGAhKmMIQAAAABJRU5ErkJggg==",
  /* green */ "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==",
  /* blue */ "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg=="
];

const Toggle = ({ layers, onToggle }) => {
  // this component is just for demonstration of dynamically toggling images
  return layers.map((layer, idx) => (
    <button
      key={layer.url}
      onClick={() => onToggle(idx)}
      style={{ background: layer.display ? `url(${layer.url})` : "none" }}
    >{`Toggle Layer ${idx}`}</button>
  ));
};

const Layers = () => {
  // we initialize the array from the image urls and set every layer to display: false
  const [layers, setLayers] = useState(() =>
    IMAGES.map(url => ({ url, display: false }))
  );

  // this method toggles the display state of the layer at idx
  const handleToggleLayer = idx =>
    setLayers(current =>
      current.map((layer, i) =>
        i === idx ? { ...layer, display: !layer.display } : layer
      )
    );

  return (
    <div>
      <Toggle layers={layers} onToggle={handleToggleLayer} />
      <div
        className="layers"
        style={{
          backgroundImage: layers
            .filter(layer => layer.display)
            .map(layer => `url(${layer.url})`)
            .join(", ")
        }}
      />
    </div>
  );
};

Live Demo:

Edit keen-wilbur-t6yim

Note that the first image listed will be on top (the front-most).

The example uses строки шаблона , чтобы обернуть пути к изображениям в url( ... ) и .join() чтобы присоединиться к ним.

...