vue3 vite 项目中自动导入图片

vue3 vite 项目中自动导入图片

安装插件

js 复制代码
yarn add vite-plugin-vue-images -D
或者
npm install vite-plugin-vue-images -D

配置插件

  • 在 vite.config.js 文件中配置插件
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图片
html 复制代码
<template>
    <div>
        <img :src="Logo" />
    </div>
</template>

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

注意:

1、不能有相同名字不同格式的图片

2、图片名称首字母最好大写。 PS:本人测试小写也可以。但是为了避免Bug建议大写;

相关推荐
默默地离开1 分钟前
从0到1掌握React+TypeScript开发:前端工程化实践指南
前端·react.js·typescript
Spider_Man3 分钟前
手指一拉,世界焕新:移动端下拉刷新全攻略
前端·javascript·react.js
恋猫de小郭4 分钟前
Flutter 里的 Layer 解析,带你了解不一样角度下的 Flutter 渲染逻辑
android·前端·flutter
1phoenix5 分钟前
JavaScript 实现自定义右键菜单
前端·javascript·css
迷你二鹏6 分钟前
前端之Git
前端·git
二闹20 分钟前
大厂前端研发岗位设计的30道Webpack面试题及解析
前端·面试
拾光拾趣录26 分钟前
实现 `this` 对象的深拷贝:从“循环引用崩溃”到生产级解决方案
前端·javascript
无羡仙28 分钟前
90%的人都在用的下拉刷新,我把它拆了!
前端·node.js
一念杂记28 分钟前
【实战系列】30分钟开发微信小程序登录&注册&绑定功能
前端·后端·微信小程序
阳焰觅鱼28 分钟前
LRU缓存
前端