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:

score 2 · Accepted Answer · answered Sep 10 '19 at 14:52

2

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>

answered Sep 10 '19 at 14:52

Tony Ngo

19,166
4
38
60

Thankyou for the answer, I tried your code and it showed the image but I wonder how can I add more property with this style? like adding `width` inline in reactjs – Rakis Friski Sep 10 '19 at 15:05
You can view this link https://stackoverflow.com/questions/29979324/how-to-combine-multiple-inline-style-objects – Tony Ngo Sep 10 '19 at 15:09

score 1 · Answer 2 · answered Sep 10 '19 at 14:03

1

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);

answered Sep 10 '19 at 14:03

Jonathan Irwin

5,009
2
29
48

thankyou for the answer but when I tried this, it still failed – Rakis Friski Sep 10 '19 at 14:46
hmm.. it should work - once it is in the public dir and you stop the web server and start it again can you view the image in your browser? – Jonathan Irwin Sep 10 '19 at 15:02
then you should be able to get it to work in your browser via devtools and then copy the result across to react. Have you tried with the url in quotes? eg: `background-image: url("/assets/client/al-bayan.png");` – Jonathan Irwin Sep 10 '19 at 15:07
yes i tried it, and now it work, I wonder why? is it cache or not, i don't really understand – Rakis Friski Sep 10 '19 at 15:10
I think it's just those missing quotes.. Nothing to do with cache – Jonathan Irwin Sep 10 '19 at 15:11

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

2 Answers2