Obtenir une image à partir d'une route authentifiée

Question

J'ai un travail de téléchargement d'image avant/arrière code de travail. Maintenant, je voudrais être en mesure d'obtenir l'image du serveur après son téléchargement.

Le problème est que les images doivent être derrière une route authentifiée, où l'utilisateur doit passer jwt jeton dans l'en-tête ou le corps.

Quand je tente de récupérer l'image comme ceci:

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

Je viens d'obtenir un objet formulaire comme la réponse:

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

Y aurait-il un moyen d'obtenir l'image en HTML ' img 'tag autre que coller simplement l'url dans l'attribut' src ', car il conduit à 401 (Unauthorized)

Answer 1

Vous pouvez essayer l'extrait suivant:

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)); 

Un autre exemple pour que vous vous essayez trouverez à: https://davidwalsh.name/convert-image-data-uri-javascript