ReactJS Изображение не отображается

Question

const slides = [
    { id: 0, url: "../img/slide1.jpg" },
    { id: 1, url: "../img/slide2.jpg" },
    { id: 2, url: "../img/slide3.jpg" },
];

export const BannerSlide = () => {
    const [index, set] = useState(0)
    const transitions = useTransition(slides[index], item => item.id, {
        from: { opacity: 0 },
        enter: { opacity: 1 },
        leave: { opacity: 0 },
        config: config.molasses,
    });

    useEffect(() => void setInterval(() => set(state => (state + 1) % 3), 2000), []);
    return transitions.map(({ item, props, key }) => (
        <animated.div
            key={key}
            class="bg"
            style={{ ...props, backgroundImage: `url(require("${item.url}")` }}
        />
    ))
}; 

Изображение не отображается (backgroundImage: url(require("${item.url}")) Это работает для тегов <img>. Может кто-нибудь объяснить разницу между ними? Пример:

<img src={ Background } /> отлично работает.

Спасибо!

Answer 1

Прямо сейчас backgroundImage: url(require("${item.url}") require запускается не как функция, а как текст. Попробуйте запустить его как url(${require(item.url)}), и тогда он запустит функцию require с хорошим параметром.