vite-plugin-vue-images——Vite自动导入图片

在Vue2时我们经常会这样引用图片：

<img :src='require("地址")'/>

但在Vite中不支持require了，引用图片变成了下面这样：

<template>
    <img :src='imgUrl'/>
</template>
<script setup>
    import imgUrl from '地址'
</script>

每次使用图片都得import，显然耽误了大家摸鱼的时间，这时我们可以借助vite-plugin-vue-images来实现自动导入图片。

安装

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

配置

import ViteImages from 'vite-plugin-vue-images'
 plugins: [
        ViteImages({
            dirs: ['src/assets/images'], // 指明图片存放目录
            extensions: ['jpg', 'jpeg', 'png', 'svg', 'webp'], // 有效的图像扩展
            customResolvers: [], // 覆盖名称->图像路径解析的默认行为
            customSearchRegex: '([a-zA-Z0-9]+)' // 重写搜索要替换的变量的Regex。
        })
 ]

使用

<template>
    <div>
        <img :src="LayoutAvatar" />
    </div>
</template>

<script setup lang="ts">
</script>

转化为

<template>
    <div>
        <img :src="LayoutAvatar" />
    </div>
</template>

<script setup lang="ts">
import LayoutAvatar from '@/assets/images/layout/avatar.png'
</script>

注意 爽归爽，但容易发生变量冲突，慎用！