“切图仔”不会调用图片还叫什么切图仔？因此汇总vue3项目中常见6种图片资源引入方式，总有一种能解决你当下难题；其中包含借助vite-plugin-vue-images来实现自动导入图片，从而不影响大家“摸鱼”时间，正所谓多学一个知识就能少写一行代码
一、常规
<img src="@/assets/record.jpg" />二、js通过import from
# template<img :src="imgSrc" /># jsimport imgSrc from '@/assets/painting.jpg';
三、采用vite-plugin-vue-images插件自动导入
安装插件
npm i vite-plugin-vue-images -D
配置
# vite.config.tsimport { 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。}),]
使用
自动导入图像，同级目录的文件名不能重复！命名遵循大驼峰命名方式
// src/assets/straight_man.jpg<img :src="StraightMan" /> // 注意命名遵循大驼峰命名方式
插件将转换为
<template><div><img :src="straight_man" /></div></template><script setup lang="ts">import straight_manfrom '@/assets/straight_man.jpg'</script>
四、new URL() + import.meta.url
vite官方配置文档
# template<img :src="getAssetsFile" /># jsfunction 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，两者的区别是前者懒加载资源，后者直接引入；不推荐，这种方式使时候引入的文件必须指定到具体文件夹路径，传入的变量中只能为文件名，不能包含文件路径，可以采用方式四替代该方案
# template<img :src="getAssetsHomeFile('time_shuttle.jpg')" /># jslet getAssetsHomeFile = (url: string) => {const path = `../assets/${url}`;const modules = import.meta.globEager('../assets/*');console.log(modules[path])return modules[path].default;};
六、public静态图片资源引入
// src="" 一个斜杠就表示资源定位到public下<img src="/images/effort.jpg" />
学习更多技能
请点击下方公众号
文章评论