title: Setting a dynamic backgroundImage With React inline styles
body: <p>I am new to React and I appreciate if anyone could help...</p>
  <p>I set up the environment using &quot;create-react-app&quot;, and all image files are in <code>img</code> folder under <code>src</code> folder. One of components sets background image dynamically.</p>
  <p>This works fine:</p>
  <pre><code>&lt;div style={{ background: `url(${require(&quot;../img/file-name.jpg&quot;)}) no-repeat`}}/&gt;
  </code></pre>
  <p>However, when I tried to use a variable for the file name (something like shown below), I get the error: <strong>Error: Cannot find module '../img/file-name.jpg'</strong></p>
  <pre><code>let imageUrl = '../img/' + filenames[0];
  
  ...
  
  &lt;div style={{ background: `url(${require(imageUrl)}) no-repeat`}}/&gt;
  </code></pre>
  <p>I also tried something like below just for a test, but I got the same error.</p>
  <pre><code>let imageUrl = '../img/file-name.jpg';
  
  ...
  
  &lt;div style={{ background: `url(${require(imageUrl)}) no-repeat`}}/&gt;
  </code></pre>
  <p>I appreciate if anyone could help!! Thank you!</p>