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项目使用px2rem的方法示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-07-07
这篇文章主要介绍了使用vant-picker实现自定义内容，根据内容添加图标，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-12-12
这篇文章主要介绍了彻底搞懂并解决vue-cli4中图片显示的问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-08-08
浅谈vue自定义全局组件并通过全局方法 Vue.use() 使用该组件
本篇文章主要介绍了vue自定义全局组件并通过全局方法 Vue.use() 使用该组件，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-12-12
下面小编就为大家分享一篇vue中axios解决跨域问题和拦截器的使用方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
这篇文章主要为大家详细介绍了vue实现秒杀倒计时组件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-04-04
这篇文章主要为大家介绍了VUE实现token登录验证,详细记录实现token登录验证的步骤，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-08-08
vue项目 npm run build 打包项目防止浏览器缓存的操作方法
这篇文章主要介绍了vue项目 npm run build 打包项目防止浏览器缓存的操作方法,本文给大家推荐两种方法，每种方法通过实例代码给大家介绍的非常详细，需要的朋友可以参考下2022-08-08
这篇文章主要介绍了vue-router-link选择样式设置方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
Vue Router 提供了强大的路由管理能力,帮助开发者轻松构建流畅、高效的单页应用,本文将带你深入探讨 Vue3 中的路由配置与导航操作,从安装到实战,手把手教你掌握 Vue Router 的使用技巧,需要的朋友可以参考下2025-03-03
最新评论