VueUseuseObjectUrl
Reactive URL representing an object.
Creates an URL for the provided File, Blob, or MediaSource via URL.createObjectURL() and automatically releases the URL via URL.revokeObjectURL() when the source changes or the component is unmounted.
Demo
Select file:
Object URL:
noneUsage
html
<script setup>
import { useObjectUrl } from '@vueuse/core'
import { shallowRef } from 'vue'
const file = shallowRef()
const url = useObjectUrl(file)
const onFileChange = (event) => {
file.value = event.target.files[0]
}
</script>
<template>
<input type="file" @change="onFileChange" />
<a :href="url">Open file</a>
</template>
<script setup>
import { useObjectUrl } from '@vueuse/core'
import { shallowRef } from 'vue'
const file = shallowRef()
const url = useObjectUrl(file)
const onFileChange = (event) => {
file.value = event.target.files[0]
}
</script>
<template>
<input type="file" @change="onFileChange" />
<a :href="url">Open file</a>
</template>
Component Usage
This function also provides a renderless component version via the
@vueuse/componentspackage. Learn more about the usage.
html
<template>
<UseObjectUrl v-slot="url" :object="file">
<a :href="url">Open file</a>
</UseObjectUrl>
</template>
<template>
<UseObjectUrl v-slot="url" :object="file">
<a :href="url">Open file</a>
</UseObjectUrl>
</template>
Type Declarations
typescript
/**
* Reactive URL representing an object.
*
* @see https://vueuse.org/useObjectUrl
* @param object
*/
export declare function useObjectUrl(
object: MaybeRef<Blob | MediaSource | undefined>
): Readonly<Ref<string | undefined>>
/**
* Reactive URL representing an object.
*
* @see https://vueuse.org/useObjectUrl
* @param object
*/
export declare function useObjectUrl(
object: MaybeRef<Blob | MediaSource | undefined>
): Readonly<Ref<string | undefined>>
Source
Contributors
BaboonKing
Michael Hüneburg