backgroundImage輪播：為什么我的react.js本地圖像數組不會渲染？

Question

我正在將圖像輪播添加到我的網站。 鏈接到carousel.js的div完全空白。 圖像似乎沒有渲染。 我的圖像是本地圖像，並存儲在carousel.js中的數組中。 我經歷過類似的話題，但是還無法獲得要渲染的圖像。 例如，我減小了圖像的尺寸，嘗試將圖像導入carousel.js的頂部，將images文件夾移至node模塊生成的公用文件夾，然后進行了其他十件事。 這是我的第一個React項目，因此將不勝感激。

完整的項目可以在此處的雲9上查看

這是我的carousel.js：

import React from 'react';
import ReactDOM from 'react-dom';


const imgUrls = [
  "./images/croissant.jpg",
  "./images/herbal-tea.jpg",
  "./images/matcha-latte.jpg",
  "./images/mochaLatte.jpg",
  "./images/waffle.jpg"
  ];

class Carousel extends React.Component {
    constructor (props) {
        super(props);

        this.state = {
            currentImageIndex: 0
        };

        this.nextSlide = this.nextSlide.bind(this);
        this.previousSlide = this.previousSlide.bind(this);
    }

    previousSlide () {
        const lastIndex = imgUrls.length - 1;
        const { currentImageIndex } = this.state;
        const shouldResetIndex = currentImageIndex === 0;
        const index =  shouldResetIndex ? lastIndex : currentImageIndex - 1;

        this.setState({
            currentImageIndex: index
        });
    }

    nextSlide () {
        const lastIndex = imgUrls.length - 1;
        const { currentImageIndex } = this.state;
        const shouldResetIndex = currentImageIndex === lastIndex;
        const index =  shouldResetIndex ? 0 : currentImageIndex + 1;

        this.setState({
            currentImageIndex: index
        });
    }

    render () {
        return (
            <div className="carousel">
                <Arrow direction="left" clickFunction={ this.previousSlide } glyph="&#9664;" />
                <ImageSlide url={ imgUrls[this.state.currentImageIndex] } />
                <Arrow direction="right" clickFunction={ this.nextSlide } glyph="&#9654;" />
            </div>
        );
    }
}

const Arrow = ({ direction, clickFunction, glyph }) => (
    <div 
        className={ `slide-arrow ${direction}` } 
        onClick={ clickFunction }>
        { glyph } 
    </div>
);

const ImageSlide = ({ url }) => {
    const styles = {
        backgroundImage: `url(${url})`,
        backgroundSize: 'cover',
        backgroundPosition: 'center'
    };

    return (
        <div className="image-slide" style={styles}></div>
    );
}

ReactDOM.render(
  <Carousel />,
  document.getElementById('container')
);

Answer 1

如果您使用的是webpack，則需要使用require('./imagedirectory')

就是這樣...

const imgUrls = [ require("./images/croissant.jpg") , require("./images/herbal-tea.jpg") , require("./images/matcha-latte.jpg") , require("./images/mochaLatte.jpg") , require("./images/waffle.jpg") ];

Answer 2

那這個呢 ：

const ImageSlide = ({ url }) => {

    const img = require(`${url}`);

    const styles = {
        backgroundImage: `url(${img})`,
        backgroundSize: 'cover',
        backgroundPosition: 'center'
    };

    return (
        <div className="image-slide" style={styles}></div>
    );
}