Vue函数中能否使用Vite别名？动态绑定图片路径遇问题

这不是Vite的限制，是Vite对静态资源的处理机制导致的：

• 静态写死的@/assets/images/image.jpg会在编译阶段被Vite预处理器解析，自动替换为打包后的正确资源路径，因此能正常显示。
• 动态绑定的字符串（比如computed返回值、函数返回的路径）属于纯文本，Vite不会解析其中的别名和资源路径，浏览器拿到原始字符串后自然找不到对应资源。

下面是几种可行的解决方法：

方法1：直接import图片资源 #

适合单张或少量已知图片，直接将图片作为模块导入后绑定到src：

<script setup>
import myImage from '@/assets/images/image.jpg'
const myComputedRef = ref(myImage)

// 函数返回场景
const myPathFunction = () => myImage
</script>

<template>
  <img :src="myComputedRef" alt='an image'>
  <img :src="myPathFunction()" alt='an image'>
</template>

方法2：用import.meta.glob批量导入图片 #

如果需要处理某个目录下的多张图片，可通过Vite的import.meta.glob批量导入：

<script setup>
// 批量导入assets/images下所有jpg图片，eager: true表示编译时直接加载资源
const images = import.meta.glob('@/assets/images/*.jpg', { eager: true })

// 根据文件名匹配对应图片路径
const getImagePath = (filename) => {
  return images[`@/assets/images/${filename}.jpg`]?.default
}

const myComputedRef = computed(() => getImagePath('image'))
</script>

<template>
  <img :src="myComputedRef" alt='an image'>
  <img :src="getImagePath('image')" alt='an image'>
</template>

方法3：用new URL构造动态路径 #

如果路径是完全动态拼接的（比如文件名来自后端接口），可以结合import.meta.url生成正确路径：

<script setup>
const getImagePath = (filename) => {
  // 路径需对应项目中图片的实际位置，这里为项目根目录下的src/assets/images
  return new URL(`/src/assets/images/${filename}.jpg`, import.meta.url).href
}

const myComputedRef = computed(() => getImagePath('image'))
</script>

<template>
  <img :src="myComputedRef" alt='an image'>
  <img :src="getImagePath('image')" alt='an image'>
</template>

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