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

1. 使用 import 导入图片

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

<script setup>
import img1 from '@/assets/images/1.png'; // 使用 @ 别名（需确保 Vite 配置支持）

const images = ref([
  { url: img1, selected: false },
  { url: img1, selected: false }, // 示例复用同一图片
  // 其他图片同理...
]);
</script>

检查 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）

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

<script setup>
const getImageUrl = (name) => {
  return new URL(`../../assets/images/${name}`, import.meta.url).href;
};

const images = ref([
  { url: getImageUrl('1.png'), selected: false },
  { url: getImageUrl('2.png'), selected: false },
]);
</script>