优化 Nuxt 3 中的背景图像

Question

我正在开发一个 Nuxt.js 应用程序，我需要为

<div>

设置装饰背景图像。我更喜欢使用背景图像作为装饰元素，因为它在语义上更合适，而使用

<img>

标签作为内容图像。

<NuxtImg>

会产生优化的

<img>

，但我想优化背景图像。

Answer 1

您可以使用

useImage()

生成辅助函数，如 文档

中所述

const img = useImage()
const backgroundStyles = computed(() => {
  const imgUrl = img('https://github.com/nuxt.png', { width: 100 })
  return { backgroundImage: `url('${imgUrl}')` }
})