Vue.js模板中如何导入图片？Vite动态导入SVG出现Promise异常问题

你直接在模板的:src中使用import()会返回Promise对象，所以渲染后src会显示[object Promise]，以下是几种正确的实现方式：

1. 静态导入（固定路径场景） #

在组件的script部分先导入图片资源，再在模板中绑定：

<script setup>
// 静态导入图片，Vite会自动处理为资源URL
import outlineSvg from '@material-icons/svg/1k/outline.svg'
</script>

<template>
  <svg :src="outlineSvg"></svg>
</template>

2. 动态导入（路径需动态生成场景） #

如果图片路径是动态的，需要等待import()的Promise解析完成后再赋值：

<script setup>
import { ref, onMounted } from 'vue'

const svgSrc = ref('')

onMounted(async () => {
  // 等待动态导入完成，获取资源URL
  const module = await import('@material-icons/svg/1k/outline.svg')
  svgSrc.value = module.default
})
</script>

<template>
  <!-- 用v-if确保资源加载完成后再渲染 -->
  <svg :src="svgSrc" v-if="svgSrc"></svg>
</template>

如果路径依赖响应式变量，也可以结合计算属性使用：

<script setup>
import { ref, computed } from 'vue'

const iconFolder = ref('1k')

const svgSrc = computed(async () => {
  const module = await import(`@material-icons/svg/${iconFolder.value}/outline.svg`)
  return module.default
})
</script>

<template>
  <svg :src="svgSrc" v-if="svgSrc"></svg>
</template>

3. 直接使用静态路径（无需动态导入场景） #

如果图片路径固定，也可以直接在模板的src中写路径，Vite会自动处理为正确的资源URL：

<template>
  <svg src="@material-icons/svg/1k/outline.svg"></svg>
</template>

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