Obtuve esta información de IPFS como "/ipfs://QmQqzMTavQgT4f4T5v6PWBp7XNKtoPmC9jvn12WPT3gkSE" como respuesta de la API.
Quiero mostrar este archivo (imagen) en mi página, pero no puedo encontrar la solución correcta.
¿Cómo puedo obtener la URL de la imagen de esta información en la aplicación de reacción?
Por favor ayuda con mi inquietud.
Intente agregar https://ipfs.io al comienzo de su información de ipfs como se sugiere en este documento https://docs.ipfs.io/concepts/what-is-ipfs/
es decir
ipfs://QmQqzMTavQgT4f4T5v6PWBp7XNKtoPmC9jvn12WPT3gkSEse convierte
https://ipfs.io/ipfs/QmQqzMTavQgT4f4T5v6PWBp7XNKtoPmC9jvn12WPT3gkSESi está utilizando js-ipfs, puede recuperar la imagen a través de IPFS y mostrarla:
/** Uses `URL.createObjectURL` free returned ObjectURL with `URL.RevokeObjectURL` when done with it. * * @param {string} cid CID you want to retrieve * @param {string} mime mimetype of image (optional, but useful) * @param {number} limit size limit of image in bytes * @returns ObjectURL */ async function loadImgURL(cid, mime, limit) { if (cid == "" || cid == null || cid == undefined) { return; } for await (const file of ipfs.get(cid)) { if (file.size > limit) { return; } const content = []; if (file.content) { for await(const chunk of file.content) { content.push(chunk); } return URL.createObjectURL(new Blob(content, {type: mime})); } } }Entonces puedes mostrarlo con algo como:
<body> <img id="myImage" /> <script> async function setImage() { // just an example, make sure to free the resulting ObjectURL when you're done with it // // if your CID doesn't work, try this one: Qmcm32sVsMYhURY3gqH7vSQ76492t5Rfxb3vsWCb35gVme // that's a popular CID, which should resolve every time document.getElementById("myImage").src = await loadImgURL("QmQqzMTavQgT4f4T5v6PWBp7XNKtoPmC9jvn12WPT3gkSE", "image/png", 524288); } setImage(); </script> </body>La gran ventaja de esto es que está utilizando la propia red IPFS y no depende de una puerta de enlace HTTP pública (la forma recomendada).
Puedes hacer algo como eso:
tokenURI.replace("ipfs://", "https://ipfs.io/ipfs/");