[SOLVED] Converting a NFT's image URL to base64 ends up having a `text/html`. How can I avoid this?

Moralis General
#1

I am trying to convert an image URL to base64. But the URL is not taken as an image URL. Hence the returned base64 is not readable as an image. These URLs are very common as an NFT image. How can tackle this issue?

Screenshot 2022-12-02 at 17.14.54

Here is the code that I used.

const myNFTImage = "https://i.seadn.io/gae/uZIOviZYovXQirTD8NZASDRIvxxWNbC2QnycXVEH0-amlKc3JR6Q_TitZOd3RSuXAx2ortRU8cPd4dnIlmYfabnX3sefG2NddD7ltQ?w=500&auto=format"

const toDataURL = url => fetch(url)
.then(response => response.blob())
.then(blob => new Promise((resolve, reject) => {

const reader = new FileReader()
    reader.onloadend = () => resolve(reader.result)
    reader.onerror = reject
    reader.readAsDataURL(blob)
}))


toDataURL('${myNFTImage}')
  .then(dataUrl => {
    console.log('RESULT:', dataUrl)
  })
#2

if you are sure that the data in that base64 is the expected one then you could do a string replace to replace that text/html with something else specific to an image

1 Like
#3

I changed the code to toDataURL(myNFTImage), then it worked.

1 Like