Question

我正在将图像轮播添加到我的网站。链接到carousel.js的div完全空白。图像似乎没有渲染。我的图像是本地图像，并存储在carousel.js中的数组中。我经历过类似的话题，但是还无法获得要渲染的图像。例如，我减小了图像的尺寸，尝试将图像导入carousel.js的顶部，将images文件夹移至node模块生成的公用文件夹，然后进行了其他十件事。这是我的第一个React项目，因此将不胜感激。

可以在云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>
    );
}

backgroundImage轮播：为什么我的react.js本地图像数组不会渲染？

2 个答案: