[英]display image uploaded to ipfs dynamically in react frontend
I implemented the code below but when I click save it returns the ipfs hash but the uploaded image doesn't show on the frontpage.我实现了下面的代码,但是当我点击保存时它返回 ipfs hash 但上传的图片没有显示在首页上。 Please any help will be highly appreciated!
请任何帮助将不胜感激!
onSubmit = async (event) => {
event.preventDefault();
console.log('The file will be Submitted!');
let data = this.state.buffer;
console.log('Submit this: ', data);
if (data){
try{
const postResponse = await ipfs.add(this.state.buffer)
console.log("postResponse", postResponse);
} catch(e){
console.log("Error: ", e)
}
} else{
alert("No files submitted. Please try again.");
console.log('ERROR: No data to submit');
}
}
You must use the returned CID hash to construct a valid image URL. Because the <img/>
tag doesn't support ipfs://
URL scheme, you will have to relying on one of the HTTP gateways like ipfs.io
or dweb.link
as such:您必须使用返回的 CID hash 来构建有效图像 URL。因为
<img/>
标签不支持ipfs://
URL 方案,您将不得不依赖 HTTP 网关之一,如ipfs.io
或dweb.link
如下:
https://{gateway URL}/ipfs/{content ID}/{optional path to resource}
So you could display the image using the <img/>
tag like this:所以你可以像这样使用
<img/>
标签显示图像:
const Comp = () => {
const [cid, setCid] = useState("");
// logic to retrieve and set CID state
return (
<img src={`https://ipfs.io/ipfs/${cid}`} />
);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.