title: How can I dynamically load an image from props in reactjs?
body: <p>This is my code where all the data is loaded dynamically, however the image is not loaded:</p>
  <pre><code>function ProductScreen(props) {
    const product = data.products.find((x) =&gt; x._id == props.match.params.id);
    return (
      &lt;div&gt;
        &lt;div className=&quot;details&quot;&gt;
          &lt;div className=&quot;details-image&quot;&gt;
            &lt;img src={product.image} alt=&quot;product&quot; /&gt;       /* Is something is wrong here is this line */
          &lt;/div&gt;
          &lt;div className=&quot;details-info&quot;&gt;
            &lt;ul&gt;
              &lt;li&gt;
                &lt;h4&gt;{product.name}&lt;/h4&gt;
              &lt;/li&gt;
            &lt;/ul&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    );
  }
  
  </code></pre>
  <p>And this is the code where data is coming as a props</p>
  <pre><code>export default {
    products: [
      {
        _id: 1,
        name: &quot;Slim Shirt&quot;,
        category: &quot;Shirts&quot;,
        image: &quot;images/d1.jpg&quot;,
        price: 60,
        brand: &quot;Nike&quot;,
        rating: 3.5,
        numReviews: 21,
      }
    ],
  };
  
  </code></pre>