javascript - 使用背景 : url() 时，图像未显示在 reactjs 中

Question

我在使用 reactjs 时是新手，我很困惑为什么图像没有显示在我的代码中。我正在使用 background: url() 这样我就更容易处理了。我可以成功添加图像，因为控制台中没有错误，但没有显示任何内容。有人可以帮我解决这个问题吗？

这是我的组件代码:

import React from "react";

// CSS
import './klien.css'

const Klien = () => {

    return (
        <div className="klien">
            <div className="klien-container">
                <p className="section-title">Klien Kita</p>

                <div id="klien" className="carousel slide" data-ride="carousel">

                    <div className="carousel-item active">
                        <div className="row text-center mr-auto ml-auto">
                            <div className="col-6 col-sm-6 col-md-3 col-lg-3 card-center card-size">
                                <div className="mb-3">                    
                                    <div className="img-size-1"></div>
                                </div>
                            </div>
                            <div className="col-6 col-sm-6 col-md-3 col-lg-3 card-center card-size">
                                <div className="mb-3">                    
                                    <div className="img-size" style={{ backgroundImage: `url(${"../../../assets/background/slide-4.png"})`}}></div>
                                </div>
                            </div>
                            <div className="col-6 col-sm-6 col-md-3 col-lg-3 card-center card-size">
                                <div className="mb-3">                    
                                    <div className="img-size" style={{ backgroundImage: `url(${"https://upload.wikimedia.org/wikipedia/en/thumb/1/12/Grab_%28application%29_logo.svg/800px-Grab_%28application%29_logo.svg.png"})`}}></div>
                                </div>
                            </div>
                            <div className="col-6 col-sm-6 col-md-3 col-lg-3 card-center card-size">
                                <div className="mb-3">                    
                                    <div className="img-size" style={{ backgroundImage: `url(${"https://upload.wikimedia.org/wikipedia/en/thumb/1/12/Grab_%28application%29_logo.svg/800px-Grab_%28application%29_logo.svg.png"})`}}></div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div className="carousel-item">
                        <div className="row text-center">
                            <div className="col-6 col-sm-6 col-md-3 col-lg-3 card-center card-size">
                                <div className="mb-3">                    
                                    <div className="img-size" style={{ backgroundImage: `url(${"https://imgee.s3.amazonaws.com/imgee/638b26370a794db38dfef92fa2bfe60f.png"})`}}></div>
                                </div>
                            </div>
                            <div className="col-6 col-sm-6 col-md-3 col-lg-3 card-center card-size">
                                <div className="mb-3">                    
                                    <div className="img-size" style={{ backgroundImage: `url(${"https://imgee.s3.amazonaws.com/imgee/638b26370a794db38dfef92fa2bfe60f.png"})`}}></div>
                                </div>
                            </div>
                            <div className="col-6 col-sm-6 col-md-3 col-lg-3 card-center card-size">
                                <div className="mb-3">                    
                                    <div className="img-size" style={{ backgroundImage: `url(${"https://imgee.s3.amazonaws.com/imgee/638b26370a794db38dfef92fa2bfe60f.png"})`}}></div>
                                </div>
                            </div>
                            <div className="col-6 col-sm-6 col-md-3 col-lg-3 card-center card-size">
                                <div className="mb-3">                    
                                    <div className="img-size" style={{ backgroundImage: `url(${"https://imgee.s3.amazonaws.com/imgee/638b26370a794db38dfef92fa2bfe60f.png"})`}}></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div> 
            </div>
        </div>
    );        
}

export default Klien;

这是我的CSS:

.klien{
    background-color: #f6f7fd;
    min-height: 50vh;
    max-height: 70vh;
    overflow: hidden;
}

.klien .klien-container{
    /* overflow: hidden; */
    padding-top: 10vh;
}

.klien .section-title{
    color: #1c2331;
    font-size: 3em;
    font-weight: 500;
    text-align: center;
}

.klien .card-center{
    margin: 0% auto;
}

.klien .text-center{
    text-align: center;
    width: 100vw;
}

.klien .card-size{
    max-height: 20vh;
}

.klien .mask{
    background-color: rgba(246, 247, 253, 0.5);
}

.klien .img-size{
    width: 10vw;
    height: 10vh;
    margin: 0 auto;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

.klien .img-size-1{
    background: url(../../../assets/client/al-bayan.png);
    width: 100px;
    height: auto;
}

.design-pakaian .btn-center{
    margin-left: auto;
    margin-right: auto; 
}

您可以看到在我的代码中有两种方法可以首先调用图像我正在使用内联，如您所见，我在使用外部资源 url 时成功调用了图像，但在尝试调用它时失败了我的 assets 文件夹，有人可以帮我解决这个问题吗？

这是我现在得到的:

Answer 1

你可以试试这个

 <div className="img-size" style={{ backgroundImage: `url(${"/assets/background/slide-4.png"})`}}></div>

或使用 process.env.PUBLIC_URL 作为 doc提及

 <div className="img-size" style={{ backgroundImage: `url(${"process.env.PUBLIC_URL/assets/background/slide-4.png"})`}}></div>