vue3循环展示图片实现过程
更新时间：2025年05月28日 14:35:19 作者：Hero_rong
这篇文章主要介绍了vue3循环展示图片实现过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
vue3循环展示图片
如图：
根据 id 循环展示图片，网上搜了很多教程统统没有成功，终于自己踩坑踩好了，刷到位这个帖子的兄弟姐妹有福啦！！！
关键代码1
里面有两个参数，第一个参数是当前图片的地址，换成你自己的，第二个照写不用改
const getImageUrl=(name)=>{
return new URL(`../../assets/images/home/${name}`, import.meta.url).href
}关键代码2
注释的地方，可以先写一个能展示出来的图片地址，保证地址没问题，这样直接把当前地址复制到 getImageUrl 方法里面就行
<!-- <div><img src="../../assets/images/home/home.png" alt="" /></div> -->
<div><img :src="getImageUrl('home.png')" alt="" /></div>总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue3.0中setup中异步转同步的实现方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-06-06
本篇文章主要介绍了在vue-cli中组件通信的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-12-12
本篇文章主要介绍了VueJs单页应用实现微信网页授权及微信分享功能示例，具有一定的参考价值，有兴趣的可以了解一下2017-07-07
Vue Router中router.resolve方法使用实例
这篇文章主要给大家介绍了关于Vue Router中router.resolve方法使用的相关资料,router.resolve方法在前端路由库中用于解析路由信息,接受路径或路由对象,返回解析后的 URL、路由和位置对象,需要的朋友可以参考下2024-11-11
这篇文章主要介绍了Vue实现路由跳转至外界页面方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-12-12
Vue作为一款流行的前端框架,提供了一种数据驱动的方式来实现目录树,本文主要介绍了vue 目录树的展开与关闭的实现,具有一定的参考价值,感兴趣的可以了解一下2023-11-11
Vuex是一个专为Vue.js应用程序开发的状态管理模式,下面这篇文章主要给大家介绍了关于Vue中状态管理器(vuex)详解以及实际应用场景的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-02-02
这篇文章主要介绍了使用Vuex解决Vue中的身份验证问题,本文通过文字实例相结合给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友参考下吧2018-09-09
el-table-column叠加el-popover使用示例小结
el-table-column有一列展示多个tag信息,实现点击tag展示tag信息以及tag对应的详细信息,本文通过示例代码介绍el-table-column叠加el-popover使用示例小结,感兴趣的朋友跟随小编一起看看吧2024-04-04
ESLint是一个代码检查工具,用来检查你的代码是否符合指定的规范,下面这篇文章主要给大家介绍了关于Vue项目中ESLint配置(VScode)的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-04-04
最新评论