31 lines
910 B
TypeScript
31 lines
910 B
TypeScript
/**
|
|
* Vue Composable for optimizing image used in background-image.
|
|
* @module composables/backgroundImageOptimization
|
|
*/
|
|
|
|
/**
|
|
* Vue Composable for optimizing background-image with Nuxt Image
|
|
* @returns { WritableComputedRef<{ backgroundImage: string}, string>} writable computed value that will return the Vue style object with optimized image URL
|
|
*/
|
|
function useBackgroundImageOptimization() {
|
|
const targetImage = ref("");
|
|
|
|
const img = useImage();
|
|
const backgroundImageStyles = computed({
|
|
get: () => {
|
|
const imageURL = img(targetImage.value, {
|
|
format: "webp",
|
|
quality: 80,
|
|
});
|
|
return { backgroundImage: `url("${imageURL}")` };
|
|
},
|
|
set: (value: string) => {
|
|
targetImage.value = value;
|
|
},
|
|
});
|
|
|
|
return { backgroundImageStyles };
|
|
}
|
|
|
|
export { useBackgroundImageOptimization };
|