如何使用 IPFS url 显示图像？

Question

It would like to know how to display an image from IPFS, I'm having a file that is sent to IPFS and the url is retrieved, so I have tried the below to display the image in a img tag using the url retrieved but it is not showing (I got the broken img icon instead):

<img
  alt="Profile"
  className="rounded-full w-40 h-40"
  src={
   values.url
    ? values.url
    : '/static/img2.png'
  }
/>

The IPFS url is right and is like this: https://ipfs.infura.io/ipfs/QmQRpdqjZM1kuribo1LfH2rHiu27LjXmY34hJDDdy8bKn6 So I tried with src={ values.url ? URL.createObjectURL(values.url) : '/static/img2.png'} src={ values.url ? URL.createObjectURL(values.url) : '/static/img2.png'} , the image is displayed but after I send this url with other info through a metamask transaction, the next error is shown: Uncaught TypeError: Failed to execute 'createObjectURL' on 'URL': Overload resolution failed.

Answer 1

Try adding https://ipfs.io in the beginning of your ipfs info as suggested in this document https://docs.ipfs.io/concepts/what-is-ipfs/

ie

ipfs://QmQqzMTavQgT4f4T5v6PWBp7XNKtoPmC9jvn12WPT3gkSE

becomes

https://ipfs.io/ipfs/QmQqzMTavQgT4f4T5v6PWBp7XNKtoPmC9jvn12WPT3gkSE