CodePen Embed - Fetch an image on IPFS Mainnet @helia/verified-fetch

<div id="app">
  <div>
    <h1>@helia/verified-fetch Example</h1>
    <pre>CID: bafybeicn7i3soqdgr7dwnrwytgq4zxy7a5jpkizrvhm5mv6bgjd32wm3q4</pre>
    <p id="output" class="output"></p>
  </div>
</div>

import { verifiedFetch } from 'https://esm.sh/@helia/verified-fetch?bundle-deps'

// verifiedFetch takes an IPFS URI and retrieves it from providers
const resp = await verifiedFetch('ipfs://bafybeicn7i3soqdgr7dwnrwytgq4zxy7a5jpkizrvhm5mv6bgjd32wm3q4/welcome-to-IPFS.jpg')

const blob = await resp.blob()
const imgEl = document.createElement('img')
imgEl.setAttribute('src', URL.createObjectURL(blob))
imgEl.setAttribute('width', '50%')
document.getElementById('output')?.appendChild(imgEl)

This Pen is owned by Daniel Norman on CodePen.

See more by @2color on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.