在 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; }

I am trying to map images from a folder (Address given in the picture attached) with in-line styling in ReactJs. All the data is imported from db.json and I want to display the images(position: relative) with text (position: absolute) but the picture is not available for display and I can't find where I went wrong. The picture is not displayed. Screenshot

Answer 1

如果您尝试设置背景图像，则 css 属性为BackGroundImage 。其次，您需要从文件夹中导入图像，这就是您要执行的操作

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

Answer 2

Just add the image into a folder in react and set it as a background image you would in regular css

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

Just one to note also, i would always give your styles a capital letter if you are using .module.css and do not use - or _ , i would recommend renaming to .FeaturedImage, and then change it in your jsx - className={style.FeaturedImage}

Answer 3

Try

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

Also consider placing your images in the public folder instead - static assets work best there. By doing this you could use this approach:

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

Read more about static assets in React here: https://create-react-app.dev/docs/using-the-public-folder/