title: Download image using Axios in React?
body: <p>I'm trying to download an image using a GET request in Axios, and then download this to the users PC.  I need to use Axios as the get request has an Authorization header.</p>
  
  <p>Below I have my function to download the image and store it as a blob:</p>
  
  <pre><code>return axios({
    method: 'GET',
    headers: { Authorization: `Bearer ${jwt}` },
    url: `https://example.com/api/${url}`,
    responseType: 'blob'
  })
  .then(response =&gt; {
    if (response) {
      const file = new Blob([response.data], {type:'image/png'})
      return file
    }
    return Promise.reject('An unknown error occurred');
  });
  </code></pre>
  
  <p>I then user FileSaver to save this:</p>
  
  <pre><code>  const image = await userService.downloadImage(slug, this.props.token);
    FileSaver.saveAs(image, "image.png")
  </code></pre>
  
  <p>What I am getting though is an error when downloading the file saying </p>
  
  <blockquote>
    <p>"Failed - Network Error"</p>
  </blockquote>
  
  <p>If I look in the developer option of Chrome,  I can see the GET request to the API, and in the preview tab, I can see the image.</p>
  
  <p>Any suggestions as to where I am going wrong?</p>