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;
}I am attempting to display images with inline styling in ReactJS fetched from a folder (Location provided in the attached image). The information is sourced from db.json but I am facing difficulty in rendering the images properly. Despite setting the positions for image and text correctly, the picture does not appear on the screen. Any assistance in resolving this issue would be greatly appreciated.Screenshot