vue3使用构建工具时，关于本地图片的引用

1. 使用 import 导入图片

在组件顶部导入图片，并绑定到 images 数据：

检查 Vite 别名配置在 vite.config.js 中确认 @ 别名指向 src：

import { defineConfig } from 'vite'

import vue from '@vitejs/plugin-vue'

import path from 'path'

export default defineConfig({

plugins: [vue()],

resolve: {

alias: {

'@': path.resolve(__dirname, './src'), // 确保 @ 指向 src 目录

},

},

})

2. 使用动态路径（new URL）

如果图片需要动态加载（如路径来自变量），使用以下方式：