backgroundImage carousel: Почему рендеринг массива локальных изображений моего рендера не выполняется? - PullRequest
Новая
       13

backgroundImage carousel: Почему рендеринг массива локальных изображений моего рендера не выполняется?

0 голосов
/ 24 августа 2018

Я добавляю карусель изображений на свой сайт. Div, который связан с carousel.js, полностью пуст. Кажется, что изображения не рендеринга. Мои изображения локальные и хранятся в массиве в carousel.js. Я прошел через похожие темы, но не смог получить изображения для рендеринга. Например, я уменьшил размер изображения, попытался импортировать изображения вверху carousel.js, переместил папку с изображениями в общую папку, созданную модулем узла, и еще около десяти других вещей. Это мой первый проект реагирования, поэтому любая помощь будет оценена.

Полный проект можно посмотреть в облаке 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')
);

Ответы [ 2 ]

0 голосов
/ 25 августа 2018

Что по этому поводу: 

const ImageSlide = ({ url }) => {

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

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

    return (
        <div className="image-slide" style={styles}></div>
    );
}
0 голосов
/ 25 августа 2018

Если вы используете веб-пакет, вам нужно использовать 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") ];

...