唯品秀前端博客

“切图仔”不会调用图片还叫什么切图仔?因此汇总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" /> // 注意命名遵循大驼峰命名方式
剩余50%内容付费后可查看
本站所有文章、图片、资源等如无特殊说明或标注,均为来自互联网或者站长原创,版权归原作者所有;仅作为个人学习、研究以及欣赏!如若本站内容侵犯了原著者的合法权益,可联系我们进行处理,邮箱:343049466@qq.com
赞(1) 打赏
标签:

上一篇:

下一篇:

相关推荐

0 条评论关于"Vite+Vue3图片资源六种引入方式,总有一种能解决你当下难题"

表情

最新评论

    暂无留言哦~~
谢谢你请我吃鸡腿*^_^*

支付宝扫一扫打赏

微信扫一扫打赏