title: Dynamic loading of images in React JS
body: <p>I am trying to dynamically get images from my images folder based on some information retrieved from the database. Gone through as many resources as I could but still unable to solve the problem. Here's my code:</p>
  <pre><code>import scimitar from &quot;../../images/scimitar.png&quot;;
  import defender from &quot;../../images/defender.png&quot;;
  import arrows from &quot;../../images/arrows.png&quot;;
  import cape from &quot;../../images/cape.png&quot;;
  import platebody from &quot;../../images/platebody.png&quot;;
  
  const ItemCard = ({ item }) =&gt; {
  
  
      return (
          &lt;div&gt;
              &lt;p key={item.id}&gt;ID: {item.id}&lt;/p&gt;
              &lt;p&gt;Name: {item.name}&lt;/p&gt;
              &lt;p&gt;{item.examine}&lt;/p&gt;
              &lt;p&gt;
                  &lt;Link to={`/items/${item.id}`}&gt;{item.name}&lt;/Link&gt;
              &lt;/p&gt;
  
              &lt;img src={require(item.name)} alt={item.examine} /&gt;
          &lt;/div&gt;
      )
  }
  
  const ItemList = () =&gt; {
      const [items, setItems] = useState(null);
  
      const populateItems = async () =&gt; {
          const data = await getItems();
          setItems(data);
      };
  
      useEffect(() =&gt; populateItems(), []);
  
  
      return (
          &lt;div&gt;
              {items &amp;&amp;
                  items.map((item, index) =&gt; (
                      &lt;ItemCard item={item} key={index} /&gt;
                  ))
              }
          &lt;/div&gt;
      )
  }
  </code></pre>