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。

相关推荐
知识分享小能手1 小时前
React学习教程,从入门到精通, React 属性(Props)语法知识点与案例详解(14)
前端·javascript·vue.js·学习·react.js·vue·react
赵得C5 小时前
【前端技巧】Element Table 列标题如何优雅添加 Tooltip 提示?
前端·elementui·vue·table组件
叫我阿柒啊6 小时前
Java全栈开发工程师的实战面试经历:从基础到微服务
java·微服务·typescript·vue·springboot·前端开发·后端开发
@八度余温8 小时前
eslint 和 prettier 的相同点和区别
vue·eslint
周航宇JoeZhou10 小时前
JP4-7-MyLesson后台前端(五)
java·前端·vue·elementplus·前端项目·mylesson·管理平台
计算机学长felix12 小时前
基于Django的“酒店推荐系统”设计与开发(源码+数据库+文档+PPT)
数据库·python·mysql·django·vue
陶甜也14 小时前
threeJS 实现开花的效果
前端·vue·blender·threejs
叫我阿柒啊1 天前
从Java全栈到前端框架:一次真实面试的深度复盘
java·spring boot·typescript·vue·database·testing·microservices
借你耳朵说爱你1 天前
浅拷贝和深拷贝两种不同的对象复制
vue·web
F2E_Zhangmo1 天前
基于cornerstone3D的dicom影像浏览器 第四章 鼠标实现翻页、放大、移动、窗宽窗位调节
vue·cornerstone·cornerstone3d·cornerstonejs