Nuxt 3：如何通过object标签使用assets目录中的SVG文件

Nuxt3 默认仅自动处理 img、video 等常见标签的资源路径，但 object 标签的 data 属性不在自动转换列表中，导致 ~/assets 路径无法被解析。以下是几种官方支持的实现方式：

方法一：使用 useAsset 工具函数 #

通过 Nuxt 提供的 useAsset 手动解析资源路径，绑定到 data 属性上：

<template>
  <object :data="useAsset('~/assets/icons/info-circle-solid.svg')" type="image/svg+xml" />
</template>

方法二：将 SVG 作为组件导入 #

直接把 SVG 文件当作 Vue 组件导入使用，这种方式还能方便地操作 SVG 内部元素：

<template>
  <InfoCircleSolid />
</template>

<script setup>
import InfoCircleSolid from '~/assets/icons/info-circle-solid.svg?component'
</script>

方法三：扩展自动转换的属性列表 #

在 nuxt.config.ts 中配置 Vite，让 Nuxt 自动处理 object 标签的 data 属性：

export default defineNuxtConfig({
  vite: {
    vue: {
      template: {
        transformAssetUrls: {
          object: ['data']
        }
      }
    }
  }
})

配置完成后，即可像使用 img 标签一样直接写路径：

<object data="~/assets/icons/info-circle-solid.svg" type="image/svg+xml" />

内容的提问来源于stack exchange，提问作者Matt Sanders