Hi i have a little problem, i use the GIPHY-api to get GIFS (obviously) and when i get the url of the Gifs i need, i put them into my img src element. But CORB seems blocking the url for some reason

when i console.log the data.data[0].url i get this url =

here's the code :

function verwerkData(data) {
    gifContainer.innerHTML += `<img src="${data.data[0].url}" title="${data.data[0].title}"/>`;
}

The error = Cross-Origin Read Blocking (CORB) blocked cross-origin response with MIME type text/html. See for more details.

Hi i have a little problem, i use the GIPHY-api to get GIFS (obviously) and when i get the url of the Gifs i need, i put them into my img src element. But CORB seems blocking the url for some reason

when i console.log the data.data[0].url i get this url = https://giphy./gifs/soulpancake-funny-kid-president-kidpresident-rgk1DxSugZDFu

here's the code :

function verwerkData(data) {
    gifContainer.innerHTML += `<img src="${data.data[0].url}" title="${data.data[0].title}"/>`;
}

The error = Cross-Origin Read Blocking (CORB) blocked cross-origin response https://giphy./gifs/soulpancake-funny-kid-president-kidpresident-rgk1DxSugZDFu with MIME type text/html. See https://www.chromestatus./feature/5629709824032768 for more details.

• javascript
• cross-origin-read-blocking

2 Answers 2

As Quentin mentioned it before, you have to find the image URL, not the page URL containing the image URL. You have two options. First, go by yourself, if it's not a dynamic web page, on the Giphy page, and search by yourself the image : https://i.sstatic/hx8SN.gif.

Else, using XHR or a backend request, perform a regex on the response content to extract the image. For the example :

const regex = /https:\/\/.*giphy.*\/media\/\w+\/giphy.gif\?cid=[a-f0-9]+&rid=giphy\.gif&ct=g/gi

The src attribute for an <img> has to contain the URL to an image

It doesn't make sense to put the URL to an HTML document there.

The error message essentially says "This is an HTML document, that can't be right, I'm blocking it".