使用
useImage()
一个 Vue 可组合函数，用于返回一个辅助函数以生成优化的图片 URL。
有时你可能需要直接使用生成的图片 URL，并应用转换，而不是使用 <NuxtImg> 和 <NuxtPicture> 组件。 这就是 useImage() 的用武之地（以及它返回的辅助函数，你通常会看到它被直接引用为 $img 或 img）。
使用
const img = useImage()
img(src, modifiers, options)
示例： 为 backgroundImage 样式生成图片 URL。
const img = useImage()
const backgroundStyles = computed(() => {
const imgUrl = img('https://github.com/nuxt.png', { width: 100 })
return { backgroundImage: `url('${imgUrl}')` }
})
img.getSizes
const img = useImage()
img.getSizes(src, { sizes, modifiers })
不稳定：
getSizes API 可能会发生变化或被删除。参数
src: (字符串) 原图片 ID 的来源sizes: (字符串) 响应式图片大小列表 ({断点}:{大小}{单位})modifiers: (对象) 传递给提供者用于调整大小和优化的修饰符width: 调整到指定宽度（以像素为单位）height: 调整到指定高度（以像素为单位）quality: 更改图片质量（0 到 100）format: 更改图片格式- (任何其他自定义提供者修饰符)
options: (对象)
示例： 带有 Vuetify v-img 的响应式 srcset
<script setup lang="ts">
const props = defineProps({
height: { type: [Number, String], default: 500 },
src: {
type: String,
default: '/img/header-bg.jpg'
}
})
const img = useImage()
const _srcset = computed(() => {
return img.getSizes(props.src, {
sizes: 'xs:100vw sm:100vw md:100vw lg:100vw xl:100vw',
modifiers: {
format: 'webp',
quality: 70,
height: props.height
}
})
})
</script>
<template>
<v-img
:lazy-src="img(src, { width: 10, quality: 70 })"
:src="img(src, { height, quality: 70 })"
:srcset="_srcset.srcset"
:height="height"
:sizes="_srcset.sizes"
></v-img>
</template>