Vite+Vue3图片资源六种引入方式，总有一种能解决你当下难题

作者：管理员 2022-07-18 11:58:58 分类：Vue3新篇章阅读（408） 0

“切图仔”不会调用图片还叫什么切图仔？因此汇总vue3项目中常见6种图片资源引入方式，总有一种能解决你当下难题；其中包含借助vite-plugin-vue-images来实现自动导入图片，从而不影响大家“摸鱼”时间，正所谓多学一个知识就能少写一行代码

一、常规

1	<img src="@/assets/record.jpg" />

二、js通过import from

1
2
3
4
5

# template
<img :src="imgSrc" />

# js
import imgSrc from '@/assets/painting.jpg';

三、采用vite-plugin-vue-images插件自动导入

安装插件

1	npm i vite-plugin-vue-images -D

配置

1
2
3
4
5
6
7
8
9
10
11
12

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

使用

自动导入图像，同级目录的文件名不能重复！命名遵循大驼峰命名方式

1 2	// src/assets/straight_man.jpg <img :src="StraightMan" /> // 注意命名遵循大驼峰命名方式

插件将转换为

1
2
3
4
5
6
7
8
9

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

<script setup lang="ts">
import straight_man from '@/assets/straight_man.jpg'
</script>

四、new URL() + import.meta.url

vite官方配置文档

1
2
3
4
5
6
7
8

# template
<img :src="getAssetsFile" />

# js
function getAssetsImages(name) {
return new URL(`/src/assets/${name}`, import.meta.url).href;
}
const getAssetsFile = getAssetsImages('valentine_day.jpg');

五、import.meta.glob

使用vite的import.meta.glob或import.meta.globEager，两者的区别是前者懒加载资源，后者直接引入；不推荐，这种方式使时候引入的文件必须指定到具体文件夹路径，传入的变量中只能为文件名，不能包含文件路径，可以采用方式四替代该方案

1
2
3
4
5
6
7
8
9
10

# template
<img :src="getAssetsHomeFile('time_shuttle.jpg')" />

# js
let getAssetsHomeFile = (url: string) => {
const path = `../assets/${url}`;
const modules = import.meta.globEager('../assets/*');
console.log(modules[path])
return modules[path].default;
};

六、public静态图片资源引入

1 2	// src="" 一个斜杠就表示资源定位到public下 <img src="/images/effort.jpg" />

本站所有文章、图片、资源等如无特殊说明或标注，均为来自互联网或者站长原创，版权归原作者所有；仅作为个人学习、研究以及欣赏！如若本站内容侵犯了原著者的合法权益，可联系我们进行处理，邮箱：343049466@qq.com

赞(1) 打赏

标签：

Vite Vue3

上一篇：Vite+Ts项目找不到模块“xxx”或其相应的类型声明

下一篇：没有了，已经是最新文章