vite动态加载图片

参考CSDN

方法一

根据官网的提示, 就是在将asset 前面加上src

html 复制代码
<img v-if="post.welcomeScreen" :src="`/src/assets/blogPhotos/${name}.jpg`" alt="" />

方法二

关于第二个方法,官网说:"实际上,Vite 并不需要在开发阶段处理这些代码!在生产构建时,Vite 才会进行必要的转换保证 URL 在打包和资源哈希后仍指向正确的地址。"

因此,以下的方法开发阶段不需要了解。

首先把给src绑定一个函数,然后把需要图片名字传给函数。

js 复制代码
<img :src="" alt="getImageUrl(name)" />
//or
<img v-lazy="getImageUrl(res.img)" />
js 复制代码
function getImageUrl(name) {
    return new URL(`../assets/blogPhotos/${name}.jpg`, import.meta.url).href;
//or
function getImageUrl(name) {
    return new URL(`/src/assets/img/${name}`, import.meta.url).href
  }

import.meta

import.meta 对象包含关于当前模块的信息。

它的内容取决于其所在的环境。在浏览器环境中,它包含当前脚本的 URL,或者如果它是在 HTML 中的话,则包含当前页面的 URL。

相关推荐
知识分享小能手3 小时前
uni-app 入门学习教程,从入门到精通,uni-app 企业项目实战:鲁嗑瓜子项目开发知识点(9)
前端·javascript·学习·微信小程序·小程序·uni-app·vue
社会底层无业大学生5 小时前
uniapp微信小程序简单表格展示
微信小程序·小程序·uni-app·vue·1024程序员节
weixin_4454766810 小时前
Vue 项目全局水印功能完整实现指南
vue·vue2·1024程序员节
陶甜也1 天前
ThreeJS曲线动画:打造炫酷3D路径运动
前端·vue·threejs
梁辰兴2 天前
企业培训笔记:外卖平台后端--套餐管理模块--新建套餐信息
笔记·vue·mybatis·springboot·外卖管理系统
是梦终空3 天前
计算机毕业设计241—基于Java+Springboot+vue的爱心公益服务系统(源代码+数据库+11000字文档)
java·spring boot·vue·毕业设计·课程设计·毕业论文·爱心公益系统
麦麦大数据3 天前
D025 摩托车推荐价格预测可视化系统|推荐算法|机器学习|预测算法|用户画像与数据分析
mysql·算法·机器学习·django·vue·推荐算法·价格预测
七仔的博客3 天前
Vue视差标题背景
vue·博客·动画·视差
梁辰兴3 天前
企业培训笔记:外卖平台后端--套餐管理模块--回显套餐信息
笔记·vue·mybatis·springboot·外卖管理系统
Olrookie4 天前
若依前后端分离版学习笔记(二十)——实现滑块验证码(vue3)
java·前端·笔记·后端·学习·vue·ruoyi