Vue3的vite中图片动态加载3种方式
更新时间:2023年11月10日 11:16:28 作者:一月清辉
这篇文章主要给大家介绍了关于Vue3的vite中图片动态加载3种方式的相关资料,图片进入可视区域,进行动态加载图片操作,文中通过代码介绍的非常详细,需要的朋友可以参考下
第一种方式(适用于处理单个链接的资源文件)
import homeIcon from '@/assets/images/home/home_icon.png' <img :src="homeIcon" />
第二种方式----- 图片在src目录下
new URL() + import.meta.url
const getAssetsFile = (url) => { return new URL(`../assets/images/${url}`, import.meta.url).href }
注意:这里只能通过 …/…/ 这种方式去获取路径,无法通过@/assets
第三种方式---- 图片在public目录下
/** * @description: 动态加载图片 (注意:将图片放到public目录下) * @param {*} imgUrl public目录下图片的地址:eg: /public/imgs/a.png, 则imgUrl为 ./imgs/a.png * @return {*} 返回图片的绝对路径 */ const loadPicture = (imgUrl) => { let pathnameArr = location.pathname.split("/"); let realPathArr = [] pathnameArr.forEach(item =>{ if( item && item.slice(-5) !== '.html'){ realPathArr.push(item) } }) let realPath = location.origin + "/" if(realPathArr.length > 0){ realPath = realPath + realPathArr.join('/') + "/" } return new URL(imgUrl, realPath).href; }
总结
到此这篇关于Vue3的vite中图片动态加载3种方式的文章就介绍到这了,更多相关vite图片动态加载内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
Vue如何使用Element-ui表单发送数据与多张图片到后端详解
在做项目的时候遇到一个问题,前端需要上传表单到后端,表单数据包括文本内容和图片,这篇文章主要给大家介绍了关于Vue如何使用Element-ui表单发送数据与多张图片到后端的相关资料,需要的朋友可以参考下2022-04-04解决Vue中的生命周期beforeDestory不触发的问题
这篇文章主要介绍了解决Vue中的生命周期beforeDestory不触发的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
最新评论