Image doesn't show up in reactjs when using background: url()

Question

I'm new when using reactjs, I quite confused as why the image doesn't show up in my code. I'm using background: url() so it easier for me to process. I can succesfully add the image since there is no error in console but nothing show up. can someone help me to solve this?

this is my component code:

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;

this is my 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; 
}

you can see that in my code there is 2 ways to call the image first I'm using inline as you can see, I successfully call the image when using external resource url but I'm failed when tried to call it from my assets folder, can someone help me to solve this?

this is what I got right now:

Answer 1

You can try this

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

or using process.env.PUBLIC_URL as in this doc mention

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

Answer 2

I think the most likely cause is that the image isn't available at that path once your app gets bundled. If you used CRA (Create React App) to start your project place the image file in your public/assets/client/al-bayan.png folder and update the path to url(/assets/client/al-bayan.png);