[SOLVED] Cannot see my image because = CORB blocked cross-origin response

Cannot see my image because = CORB blocked cross-origin response

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.com/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.com/gifs/soulpancake-funny-kid-president-kidpresident-rgk1DxSugZDFu with MIME type text/html. See https://www.chromestatus.com/feature/5629709824032768 for more details.

Solution

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.net/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