title: How to load an image onto the page with react from dynamic data?
body: <p>I want to display an image on my react app page</p>
  
  <pre><code>import egypt from '../images/egypt.svg'
  
  &lt;div&gt;
     &lt;img src={egypt}/&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Is this the correct way to do this?</p>
  
  <p>Also I want to load it in from an object like this:</p>
  
  <pre><code>options: [{
         optionOne: {
           answer: 'bolivia',
           image: './images/egypt.svg'
         }
       }]
  </code></pre>
  
  <p>how can I display it on screen?</p>
  
  <p>my error is saying I need an appropriate loader. I tried to use this: <a href="https://www.npmjs.com/package/image-webpack-loader" rel="nofollow noreferrer">https://www.npmjs.com/package/image-webpack-loader</a></p>
  
  <p>but it says: <code>Can't resolve 'file-loader'</code></p>
  
  <pre><code>  {
      test: /\.svg$/i,
      loaders: [
          'file-loader?hash=sha512&amp;digest=hex&amp;name=[hash].[ext]',
          'image-webpack-loader?bypassOnDebug&amp;optimizationLevel=7&amp;interlaced=false'
      ]
    }
  </code></pre>