title: React Image Rendering using require()
body: <p>I'm trying to render images in react using require().
  Below is a snapshot of the code that is working.</p>
  <pre><code>const ProjectBlock: React.FC&lt;{ data: PROJECTBLOCK }&gt; = (props) =&gt; {
    const baseUrl = &quot;../../../assets/images/forkify.png&quot;;
    return (
      &lt;div className=&quot;projectblock&quot;&gt;
        &lt;div className=&quot;projectblock__heading&quot;&gt;
          &lt;h3 className=&quot;subheading-default margin-bottom&quot;&gt;{props.data.heading}&lt;/h3&gt;
          &lt;p className=&quot;para&quot;&gt;{props.data.content}&lt;/p&gt;
          &lt;h4 className=&quot;smallheadin&quot;&gt;{props.data.technologies.join(&quot; · &quot;)}&lt;/h4&gt;
        &lt;/div&gt;
        &lt;img
          src={require(&quot;../../../assets/images/forkify.png&quot;)}
          alt=&quot;&quot;
          className=&quot;projectblock__image&quot;
        /&gt;
      &lt;/div&gt;
    );
  };
  </code></pre>
  <p>In the above case, I'm passing a string to the require() function. However when I try and store the string in the baseUrl variable and pass it to the require() function, it does not work and gives the following error in the console.</p>
  <pre><code>Uncaught Error: Cannot find module '../../../assets/images/forkify.png'
  </code></pre>
  <p>Here is how I am trying to use the variable with require()</p>
  <pre><code>const ProjectBlock: React.FC&lt;{ data: PROJECTBLOCK }&gt; = (props) =&gt; {
    const baseUrl = &quot;../../../assets/images/forkify.png&quot;;
    return (
      &lt;div className=&quot;projectblock&quot;&gt;
        &lt;div className=&quot;projectblock__heading&quot;&gt;
          &lt;h3 className=&quot;subheading-default margin-bottom&quot;&gt;{props.data.heading}&lt;/h3&gt;
          &lt;p className=&quot;para&quot;&gt;{props.data.content}&lt;/p&gt;
          &lt;h4 className=&quot;smallheadin&quot;&gt;{props.data.technologies.join(&quot; · &quot;)}&lt;/h4&gt;
        &lt;/div&gt;
        &lt;img src={require(baseUrl)} alt=&quot;&quot; className=&quot;projectblock__image&quot; /&gt;
      &lt;/div&gt;
    );
  };
  </code></pre>
  <p>Have even tried with template literals.
  Please help!</p>