title: Concatenate local path + dynamic images from Map - React.Js
body: <p>i'm trying to do a CardList items from a local  <code>data.json</code> file using React.Js.</p>
  
  <p>To load the data i'm using a map function:</p>
  
  <pre><code>const ItemsList = data.map(item=&gt;{
  
    return(
    &lt;li&gt;&lt;img key={item.id} src={"assets/images/sampleImages/" + item.image}/&gt;&lt;/li&gt;
    )
  })
  </code></pre>
  
  <p><a href="https://pastebin.com/mgJuavU4" rel="nofollow noreferrer">Code - PasteBin</a> </p>
  
  <p>but i cannot get the image. No error, just a broken image icon appear.</p>
  
  <p>I've try: </p>
  
  <p><a href="https://codepen.io/anon/pen/ooKWzJ?editors=1010" rel="nofollow noreferrer">This solution</a> And with URL works, but don't work with path.</p>
  
  <p><a href="https://stackoverflow.com/questions/47725373/display-image-from-json-api-in-react-using-jsx">Also this thread</a>. And nothing works.</p>
  
  <p><a href="https://i.stack.imgur.com/du4VTm.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/du4VTm.png" alt="Broken images to illustrate."></a></p>