从认证的路径获取图像

Question

我有一个工作的图像上传前端/后端代码工作。现在我希望能够在上传后从服务器获取图像。

问题是图像必须位于经过验证的路由之后，其中用户必须在标头或正文中传递jwt令牌。

当我尝试获取这样的形象：

fetch(imageURL, { 
    method: 'GET', 
    headers: { 
     'x-access-token': localStorage.getItem('token') 
} 

我只是得到一个表单对象作为回应：

<img alt="Your pic" src="[object FormData]"> 

会不会有某种方式来获得图像转换成HTML“ IMG”标签的其他不仅仅是粘贴在URL‘SRC’属性，因为它导致401 (Unauthorized)

Answer 1

你可以试试下面的代码片段：

const myImage = document.querySelector('img'); 

// I make a wrapper snippet which will resolve to a objectURL 
function fetchImage(url, headers) { 
    return new Promise((resolve, reject) => { 
     fetch(url, headers) 
      .then(response => response.blob()) // sending the blob response to the next then 
      .then(blob => { 
       const objectUrl = URL.createObjectURL(blob); 
       resolve(objectUrl); 
      }) // resolved the promise with the objectUrl 
      .catch(err => reject(err)); // if there are any errors reject them 
    }); 
} 

fetchImage(imageUrl, { 
    method: 'GET', 
    headers: { 
     'x-access-token': localStorage.getItem('token') 
    } 
}) 
    .then(objectUrl => myImage.src = objectUrl) 
    .catch(err => console.log(err)); 

的其他例子让你尝试，你可以找到在： https://davidwalsh.name/convert-image-data-uri-javascript