title: How to dynamically load an image in react
body: <p>How can I correctly load this image?</p>
  <pre><code>import image_1 from &quot;../../static_media/1.png&quot;
  
  handleClick = async (e) =&gt; {
      
      this.loadImage({
          &quot;0&quot;: {
              name: &quot;1.png&quot;,
              image: image_1,
              backend_address: await fetch(image_1).then(res =&gt; res.blob())
          }})
      }
  </code></pre>
  <p>When I do <code>console.log(this.state.files[0])</code></p>
  <p>I get</p>
  <blockquote>
  <p>backend_address: Blob {size: 736023, type: 'image/png'} image:
  &quot;/static/media/1.46b58831.png&quot; name: &quot;1.png&quot; [[Prototype]]: Object</p>
  </blockquote>
  <p>When I do the following</p>
  <pre><code>&lt;Image src={this.state.files[0].image} /&gt;
  </code></pre>
  <p>I get</p>
  <blockquote>
  <p>TypeError: Cannot read properties of undefined (reading 'image')</p>
  </blockquote>