title: React lazy load image in a component that is passed image source as a property
body: <p>I have a React app created with <code>create-react-app</code>. It contains the standard <code>src/</code> directory and I have created a <code>src/assets/home/</code> directory where I have saved image files that I intend to use in my project. I am not sure how to get the image referencing correctly within components in my app.</p>
  
  <p>I have the following component that I pass a set of properties whose path is <code>src/scenes/Home/InfographicSection/InfographicBlock/InfographicBlock.js</code>:</p>
  
  <pre><code>        &lt;InfographicBlock
              title="Some Title"
              description="some text"
              imgPath="../../../../assets/home/home-logo.png"
          /&gt;
  </code></pre>
  
  <p>The InfographicBlock uses the library <code>react-lazyload</code> (<a href="https://www.npmjs.com/package/react-lazyload" rel="nofollow noreferrer">https://www.npmjs.com/package/react-lazyload</a>):</p>
  
  <pre><code>import React from 'react';
  import LazyLoad from 'react-lazyload';
  
  const InfographicBlock = (props) =&gt; (
          &lt;div className="infographic-block columns"&gt;
  
          &lt;LazyLoad height={200}&gt;
              &lt;img src={require(`${props.imgPath}`)} alt="" /&gt;
          &lt;/LazyLoad&gt;
  
              &lt;div className="content-container column"&gt;
                  &lt;h2 className="subtitle"&gt;{props.title}&lt;/h2&gt;
                  &lt;p&gt;{props.description}&lt;/p&gt;
              &lt;/div&gt;
  
          &lt;/div&gt;
  );
  
  export default InfographicBlock;
  </code></pre>
  
  <p>The image referencing works great if I add the string path directly to the image tag like so: </p>
  
  <pre><code>&lt;img src={ require('../../../../assets/home/home-logo.png') } /&gt;
  </code></pre>
  
  <p>However seeing as this is a component, I want to pass in the property as a variable to reuse the component.</p>
  
  <p>I have tried variations of this without success:</p>
  
  <pre><code>&lt;img src={require(`${props.imgPath}`)} alt="" /&gt;
  </code></pre>
  
  <p>Any help is appreciated.</p>