在Vue2时我们经常会这样引用图片：
<img :src="require('@/assets/image/logo.png')" />
1
但在Vite中不支持require了，引用图片变成了下面这样：
<template>
<img :src="Logo" />
</template>
<script lang="ts" setup>
import Logo from '@/assets/image/logo.png'
</script>
1
2
3
4
5
6
7
2
3
4
5
6
7
每次使用图片都得import，显然耽误了大家摸鱼的时间，这时我们可以借助vite-plugin-vue-images来实现自动导入图片。
安装
npm i vite-plugin-vue-images -D
1
配置
// vite.config.ts
import { defineConfig } from 'vite'
import ViteImages from 'vite-plugin-vue-images'
export default defineConfig({
plugins: [
ViteImages({
dirs: ['src/assets/image'] // 指明图片存放目录
})
]
})
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
使用
<template>
<!-- 直接使用 -->
<img :src="Logo" />
</template>
<script lang="ts" setup>
// import Logo from '@/assets/image/logo.png'
</script>
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
