Read a file from a mount into an object URL for <img src>, revoking it
automatically on unmount or when mount/relPath changes. This is the React
answer to "an opaque-origin iframe can't fetch a mount path": it reads the bytes
off the sandbox ZenFS (openFs) and hands you a URL to drop into an
<img>, and it owns the create/revoke lifecycle so you never leak a URL.
Pass null/undefined for mount or relPath to mean "nothing to load yet"
(idle state, no read). For a ready-made element use MountImage.
const { url, loading, error } = useObjectUrl(mount, 'photos/cat.png'); if (loading) return<Spinner/>; if (error || !url) return<span>missing</span>; return<imgsrc={url}alt="cat"/>;
Off-host: under vite dev with the @immediately-run/dev-fs plugin (>= 0.5.0)
this works against your local disk — the plugin publishes its fs bridge where
the SDK discovers the sandbox fs (see sandboxFs in fs.ts). Under plain
vite dev (no plugin) there is no filesystem at all, and the hook settles to
{ url: null, loading: false, error } with error.code === 'unavailable' —
render the error/absent state, don't treat it as forever-loading.
Read a file from a mount into an object URL for
<img src>, revoking it automatically on unmount or whenmount/relPathchanges. This is the React answer to "an opaque-origin iframe can't fetch a mount path": it reads the bytes off the sandbox ZenFS (openFs) and hands you a URL to drop into an<img>, and it owns the create/revoke lifecycle so you never leak a URL.Pass
null/undefinedformountorrelPathto mean "nothing to load yet" (idle state, no read). For a ready-made element useMountImage.Off-host: under
vite devwith the@immediately-run/dev-fsplugin (>= 0.5.0) this works against your local disk — the plugin publishes its fs bridge where the SDK discovers the sandbox fs (seesandboxFsinfs.ts). Under plainvite dev(no plugin) there is no filesystem at all, and the hook settles to{ url: null, loading: false, error }witherror.code === 'unavailable'— render the error/absent state, don't treat it as forever-loading.