title: React: why is my images from data.json not being rendered whereas everything else is?
body: <p>I am trying to pass data as props to the card component, which is able to render the title, year, category and etc. but not images. Upon inspection in elements, I can see that there is an img tag <code>&lt;img src=&quot;./assets/thumbnails/beyond-earth/trending/small.jpg&quot; alt=&quot;&quot;&gt;</code> but still no image is shown.</p>
  <p>There is 'assets' folder in 'src' containing all the images.</p>
  <p>Parent Component:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React from 'react'
  import Card from './Card'
  import Data from '../../../data.json'
  
  function Trending() {
  
  
    return (
      &lt;div className='home__trending'&gt;
          &lt;h1&gt;Trending&lt;/h1&gt;
          &lt;div className="card_container"&gt;
              {
                  Data.map(data =&gt; {
                     if(data.thumbnail.trending) {
                         return(
                             &lt;Card
                             image={ data.thumbnail.trending.small }
                              title={ data.title }
                              year={ data.year }
                              category={ data.category }
                              rating={ data.rating }
                              bookmark={ data.isBookmarked }
                              key={ data.title }
                             /&gt;
                         )
                     }
                  })
              }
          &lt;/div&gt;
      &lt;/div&gt;
    )
  }
  
  export default Trending</code></pre>
  </div>
  </div>
  </p>
  <p>Child Component:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React from 'react'
  import BookmarkBorderIcon from '@mui/icons-material/BookmarkBorder'
  
  function Card(props) {
  
      console.log(props.bookmark)
    return (
      &lt;div className='card_container__card'&gt;
          &lt;BookmarkBorderIcon className='bookmark' /&gt;
          &lt;img src={ props.image } alt="" /&gt;
          &lt;span&gt;{ props.title }&lt;/span&gt;
          &lt;span&gt;{ props.year }&lt;/span&gt;
          &lt;span&gt;{ props.category }&lt;/span&gt;
      &lt;/div&gt;
    )
  }
  
  export default Card</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>