vue3 vite 项目中自动导入图片

安装插件

yarn add vite-plugin-vue-images -D
或者
npm install vite-plugin-vue-images -D

配置插件

• 在 vite.config.js 文件中配置插件

// 引入
import ViteImages from 'vite-plugin-vue-images';plugins: [vue(),// 自动导入图片配置ViteImages({dirs: ['src/assets/images'], // 指定图片存放的目录extensions: ['jpg', 'jpeg', 'png', 'svg', 'webp', 'gif'], // 支持的图片格式// 可选配置customResolvers: [], // 自定义解析行为customSearchRegex: '([a-zA-Z0-9]+)', // 重写变量名的匹配规则}),],

使用方法

• 比如在 src/assets/images 文件夹中有logo.png图片

<template><div><img :src="Logo" /></div>
</template><script setup lang="ts">
</script>

注意：
1、不能有相同名字不同格式的图片
2、图片名称首字母最好大写。 PS：本人测试小写也可以。但是问了避免Bug大写