Vize
use-object-url
Create a reactive object URL for a Blob, File, or MediaSource.
| Package | @vizejs/composable/use-object-url |
| Own the source | vize lib pull composable:use-object-url |
| Runtime exports | useObjectUrl |
| Gzip budget | 1536 B |
Usage
import { useObjectUrl } from "@vizejs/composable/use-object-url";
Runtime contract
| Utility | Category | Stability | SSR | Hydration | Cleanup | Targets | Host globals | Uses |
|---|---|---|---|---|---|---|---|---|
useObjectUrl |
media | experimental | deterministic-fallback | caller-managed | reactive-scope | web, desktop | window |
tryOnScopeDispose |
API
useObjectUrl
Create a reactive object URL for a Blob, File, or MediaSource. A new URL is created whenever the reactive object changes and the previous one is revoked immediately, so memory held by the old object is released. The last URL is revoked when the owning reactive scope stops. Outside a scope, the caller owns the last URL (it lives until unload). Server rendering: no URL is created and the ref stays undefined.
function useObjectUrl( object: MaybeRefOrGetter<ObjectUrlSource | null | undefined>, options: UseObjectUrlOptions = {}, ): Readonly<Ref<string | undefined>>
const file = shallowRef<File>();
const preview = useObjectUrl(file);
// <img :src="preview">
Types
ObjectUrlHost
Minimal object-URL capability (the URL constructor's static methods).
| Member | Type | Description |
|---|---|---|
createObjectURL |
(object: ObjectUrlSource) => string |
Create a URL referencing object. |
revokeObjectURL |
(url: string) => void |
Release a URL previously returned by createObjectURL. |
UseObjectUrlOptions
Options for useObjectUrl.
| Member | Type | Description |
|---|---|---|
host? |
MaybeRef<ObjectUrlHost | null | undefined> |
Object-URL capability for alternate runtimes and tests. A ref (not a getter) because the default host, URL, is itself a constructor. |