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

<div id="app">
  <div>
    <h1>Fetching an image by CID with @helia/verified-fetch </h1>
    <div class="card">
    </div>
    <p id="output" class="output"></p>
  </div>
</div>

import { verifiedFetch } from 'https://esm.sh/@helia/verified-fetch?bundle-deps'
const output = document.getElementById('output')

const resp = await verifiedFetch('ipfs://bafkreia2xtwwdys4dxonlzjod5yxdz7tkiut5l2sgrdrh4d52d3qpstrpy')
const blob = await resp.blob()
const imgEl = document.createElement('img')
imgEl.setAttribute('src', URL.createObjectURL(blob))
imgEl.setAttribute('width', '50%')
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.