背景图像轮播：为什么我的 react.js 本地图像数组无法渲染？

Question

我正在向我的网站添加图片轮播。链接到 carousel.js 的 div 是完全空白的。似乎图像没有渲染。我的图像是本地的，并存储在 carousel.js 中的一个数组中。我经历了类似的线程，但无法获得要渲染的图像。例如，我将图像尺寸缩小，尝试在 carousel.js 顶部导入图像，将图像文件夹移动到 node 模块生成的公共文件夹，以及其他大约十件事。这是我的第一个反应项目，所以任何帮助将不胜感激。

完整项目可以在cloud 9上查看here

这是我的 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>
    );
}