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:

Tony · Accepted Answer · 2019-09-10 14:52:16Z

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, 2019 at 14:52

Tony

20.3k7 gold badges42 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Rakis Friski Over a year ago

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

Tony Over a year ago

You can view this link stackoverflow.com/questions/29979324/…

Jonathan Irwin · Accepted Answer · 2019-09-10 14:03:32Z

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, 2019 at 14:03

Jonathan Irwin

5,8672 gold badges35 silver badges52 bronze badges

5 Comments

Rakis Friski Over a year ago

thankyou for the answer but when I tried this, it still failed

Jonathan Irwin Over a year ago

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 Over a year ago

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

Rakis Friski Over a year ago

yes i tried it, and now it work, I wonder why? is it cache or not, i don't really understand

Jonathan Irwin Over a year ago

I think it's just those missing quotes.. Nothing to do with cache

Collectives™ on Stack Overflow

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

2 Answers 2

2 Comments

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related