title: Image doesn't show up in reactjs when using background: url()
body: <p>I'm new when using reactjs, I quite confused as why the image doesn't show up in my code. I'm using <code>background: url()</code> 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?</p>
  
  <p>this is my component code:</p>
  
  <pre><code>import React from "react";
  
  // CSS
  import './klien.css'
  
  const Klien = () =&gt; {
  
      return (
          &lt;div className="klien"&gt;
              &lt;div className="klien-container"&gt;
                  &lt;p className="section-title"&gt;Klien Kita&lt;/p&gt;
  
                  &lt;div id="klien" className="carousel slide" data-ride="carousel"&gt;
  
                      &lt;div className="carousel-item active"&gt;
                          &lt;div className="row text-center mr-auto ml-auto"&gt;
                              &lt;div className="col-6 col-sm-6 col-md-3 col-lg-3 card-center card-size"&gt;
                                  &lt;div className="mb-3"&gt;                    
                                      &lt;div className="img-size-1"&gt;&lt;/div&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                              &lt;div className="col-6 col-sm-6 col-md-3 col-lg-3 card-center card-size"&gt;
                                  &lt;div className="mb-3"&gt;                    
                                      &lt;div className="img-size" style={{ backgroundImage: `url(${"../../../assets/background/slide-4.png"})`}}&gt;&lt;/div&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                              &lt;div className="col-6 col-sm-6 col-md-3 col-lg-3 card-center card-size"&gt;
                                  &lt;div className="mb-3"&gt;                    
                                      &lt;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"})`}}&gt;&lt;/div&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                              &lt;div className="col-6 col-sm-6 col-md-3 col-lg-3 card-center card-size"&gt;
                                  &lt;div className="mb-3"&gt;                    
                                      &lt;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"})`}}&gt;&lt;/div&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
  
                      &lt;div className="carousel-item"&gt;
                          &lt;div className="row text-center"&gt;
                              &lt;div className="col-6 col-sm-6 col-md-3 col-lg-3 card-center card-size"&gt;
                                  &lt;div className="mb-3"&gt;                    
                                      &lt;div className="img-size" style={{ backgroundImage: `url(${"https://imgee.s3.amazonaws.com/imgee/638b26370a794db38dfef92fa2bfe60f.png"})`}}&gt;&lt;/div&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                              &lt;div className="col-6 col-sm-6 col-md-3 col-lg-3 card-center card-size"&gt;
                                  &lt;div className="mb-3"&gt;                    
                                      &lt;div className="img-size" style={{ backgroundImage: `url(${"https://imgee.s3.amazonaws.com/imgee/638b26370a794db38dfef92fa2bfe60f.png"})`}}&gt;&lt;/div&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                              &lt;div className="col-6 col-sm-6 col-md-3 col-lg-3 card-center card-size"&gt;
                                  &lt;div className="mb-3"&gt;                    
                                      &lt;div className="img-size" style={{ backgroundImage: `url(${"https://imgee.s3.amazonaws.com/imgee/638b26370a794db38dfef92fa2bfe60f.png"})`}}&gt;&lt;/div&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                              &lt;div className="col-6 col-sm-6 col-md-3 col-lg-3 card-center card-size"&gt;
                                  &lt;div className="mb-3"&gt;                    
                                      &lt;div className="img-size" style={{ backgroundImage: `url(${"https://imgee.s3.amazonaws.com/imgee/638b26370a794db38dfef92fa2bfe60f.png"})`}}&gt;&lt;/div&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt; 
              &lt;/div&gt;
          &lt;/div&gt;
      );        
  }
  
  export default Klien;
  </code></pre>
  
  <p>this is my css:</p>
  
  <pre><code>.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; 
  }
  </code></pre>
  
  <p>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 <code>assets</code> folder, can someone help me to solve this? </p>
  
  <p>this is what I got right now:</p>
  
  <p><a href="https://i.stack.imgur.com/1x3NF.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1x3NF.png" alt="you can see that there is no image in the first two but when I&#39;m using external resource there is an image show up"></a></p>