javascript - ReactJS Picture is not displayed

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}")` }}
        />
    ))
}; 

Picture is not displayed (backgroundImage: url(require("${item.url}")) This works for <img> tags. Can someone explain the difference between the the two? Example:

<img src={ Background } /> works just fine.

Thank you!

标签： javascriptreactjs

Answer 1

Right now backgroundImage: url(require("${item.url}") require is not run as a function but as a text. Try running it as url(${require(item.url)}) and then it will fire function require with good parameter.