Отображение фонового изображения со встроенным стилем в REACTJS

Question

import React from 'react';
import Slick from 'react-slick';
import style from './Slider.module.css';
import {Link} from 'react-router-dom';

const SliderTemplates = (props) => {

    let template = null;
    const settings= {
        dots:true,
        infinite: true,
        arrows: false,
        speed: 500,
        slidesToShow:1,
        slidesToScroll:1
    }

    switch(props.type){
        case('featured'):
            template= props.data.map((item, i)=>{
                return(
                    <div key={i}>
                        <div className={style.featured_item}>
                            <div 
                                className={style.featured_image} 
                                style={{ background: `url(../../Assets/images/articles/${item.image})` }}>
                                <Link to={`/articles/${item.id}`}>
                                    <div className={style.featured_caption}>
                                    {item.title}s
                                    </div>
                                </Link>
                            </div>
                        </div>
                    </div>
                )
            })
            break;
        default: 
            template=null;
    }
    return (
        <Slick {...settings}> 
            {template}
        </Slick>
    );
};

export default SliderTemplates;

.featured_item{
    position: relative;
}
.feature_item a{
    position: absolute;
    width: 100%;
    bottom: 0px;
    text-decoration: none;
    right: 0px;
}
.featured_image {
    height: 330px;
    background-size: cover !important;
    background-repeat: no-repeat !important;
}
.featured_caption{
    color: #fff;
    top: 0px;
    width: 100%;
    padding: 20px;
    font-weight: 300;
    font-size: 28px;
    box-sizing: border-box;
}

Я пытаюсь отобразить изображения из папки (адрес указан на картинке) со встроенным стилем в ReactJs. Все данные импортированы из базы данных. json, и я хочу отобразить изображения (позиция: относительная) с текстом (позиция: абсолютная), но картинка недоступна для отображения, и я не могу найти, где я ошибся. Изображение не отображается. Снимок экрана

Answer 1

Просто добавьте изображение в папку в реакции и установите его в качестве фонового изображения, которое вы бы использовали в обычном режиме css

.featured_image {
    height: 330px;
    background: url('./(IMAGE PATH HERE)') no-repeat center center / cover
}

Только одно замечание, я бы всегда дал вашим стилям заглавную букву если вы используете .module. css и не используете - или _, я бы порекомендовал переименовать в .FeaturedImage, а затем изменить его в своем jsx - className = {style.FeaturedImage}

Answer 2

Попробуйте

style = {{backgroundImage: url(../../Assets/images/articles/${item.image})}}> `

Также рассмотрите возможность размещения своих изображений в папке publi c вместо - stati c активы работают лучше всего там. Делая это, вы можете использовать этот подход:

style={{ backgroundImage: url ($ {process.env.PUBLIC_URL} / images / article / $ {item.image}) `

Подробнее о Здесь c активы в Реакции здесь: https://create-react-app.dev/docs/using-the-public-folder/

Answer 3

если вы пытаетесь установить фоновое изображение, свойство css имеет значение BackGroundImage. Во-вторых, вам нужно импортировать изображения из папки, вот как вы это сделаете

style={{ BackGroundImage: `url(${require('../../Assets/images/articles/'+item.image+''})` }}