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。

相关推荐
一笑code11 小时前
UC浏览器PC版自2016年后未再更新不支持vue3
前端·vue
咔咔一顿操作1 天前
Cesium实战:交互式多边形绘制与编辑功能完全指南(最终修复版)
前端·javascript·3d·vue
梁辰兴1 天前
企业培训笔记:Vue3前端框架配置
笔记·前端框架·npm·vue·vue3·node
一斤代码2 天前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
sunbyte2 天前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | DoubleVerticalSlider(双垂直滑块)
前端·javascript·css·vue.js·vue
普宁彭于晏2 天前
Uni-app 生命周期与钩子:程序的“生命”旅程
uni-app·vue
你喜欢喝可乐吗?2 天前
RuoYi-Cloud 验证码处理流程
java·spring cloud·微服务·vue
魂兮归乡2 天前
B2、进度汇报(— 25/06/16)
经验分享·spring boot·ai·vue·团队开发·课程设计·web app
灰海2 天前
封装WebSocket
前端·网络·websocket·网络协议·vue
布兰妮甜3 天前
开发在线商店:基于Vue2+ElementUI的电商平台前端实践
前端·javascript·elementui·vue