如何使用 IPFS url 顯示圖像？

Question

它想知道如何顯示來自 IPFS 的圖像，我有一個發送到 IPFS 的文件並檢索了 url，所以我嘗試了下面的方法來使用檢索到的 url 在img標簽中顯示圖像但是它沒有顯示（我得到了損壞的 img 圖標）：

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

IPFS url 是正確的，如下所示： https://ipfs.infura.io/ipfs/QmQRpdqjZM1kuribo1LfH2rHiu27LjXmY34hJDDdy8bKn6 ://ipfs.infura.io/ipfs/QmQRpdqjZM1kuribo1LfH2rHiu27LjXmY34hJDDdy8bKn6 所以我嘗試使用src={ values.url ? URL.createObjectURL(values.url) : '/static/img2.png'} src={ values.url ? URL.createObjectURL(values.url) : '/static/img2.png'} ，顯示圖像，但是在我通過元掩碼事務發送此 url 和其他信息后，顯示下一個錯誤： Uncaught TypeError: Failed to execute 'createObjectURL' on 'URL': Overload resolution failed.

Answer 1

嘗試按照本文檔https://docs.ipfs.io/concepts/what-is-ipfs/中的建議在您的 ipfs 信息的開頭添加https://ipfs.io

IE

ipfs://QmQqzMTavQgT4f4T5v6PWBp7XNKtoPmC9jvn12WPT3gkSE

變成

https://ipfs.io/ipfs/QmQqzMTavQgT4f4T5v6PWBp7XNKtoPmC9jvn12WPT3gkSE