Hi there,
I am trying to use fetch an image in client side, but I am getting error:
The page’s settings blocked the loading of a resource (connect-src) at https://images.unsplash.com/photo-1504909177259-7a4a3d7e969e?q=80 because it violates the following directive: “connect-src 'self' https://api.atlassian.com/metal/ingest”
Code:
function fetchImage(imageUrl) {
const requestOptions = {
method: 'GET',
mode: 'no-cors',
headers: {'Authorization': 'Bearer ' + 'authToken'}. // I want to fetch image from the site that require authentication in header
};
fetch(imageUrl, requestOptions).then(response => {
if(response.ok) {
console.log(response.status);
return response.blob();
} else {
console.log(`There was an error fetching image: ${response.status}`);
}
}).then((blob) =>{
const img = document.createElement('img');
img.src = URL.createObjectURL(blob);
img.height = 150;
img.height = 150;
document.getElementById('image-container').appendChild(img);
});
}
manifest:
permissions:
external:
fetch:
images:
- "https://images.unsplash.com"
content:
styles:
- unsafe-inline
scripts:
- unsafe-inline
thank you!