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>总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家详细介绍了vue穿梭框实现上下移动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-01-01
Vue官方推荐AJAX组件axios.js使用方法详解与API
axios是Vue官方推荐AJAX组件,下面为大家介绍axios.js库的详细使用方法与API介绍2018-10-10
element-ui el-dialog嵌套table组件,ref问题及解决
这篇文章主要介绍了element-ui el-dialog嵌套table组件,ref问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-02-02
基础组件开发是项目业务开发的基石, 本文主要介绍了通过vue3的vite脚手架快速搭建项目, 开发条形码和二维码组件的过程,感兴趣的朋友跟随小编一起看看吧2023-08-08
本文详细介绍了如何在Vue3项目中集成Electron,包括安装electron和electron-builder两个依赖,以及配置.npmrc文件和手动修改镜像源的方法,整个过程详细记录了从创建项目、安装依赖、修改配置、到最终打包部署的每一步2024-10-10
key属性可以用来提升v-for渲染的效率,vue中使用v-for渲染数据的时候,并不会去改变原有的元素和数据,下面这篇文章主要给大家介绍了关于vue v-for中key原理的相关资料,需要的朋友可以参考下2022-04-04
这篇文章主要给大家介绍了关于Vue中extends继承和组件复用性的相关资料,组件(Component)是Vue.js最强大的功能之一,组件可以扩展HTML元素,封装可重用的代码,需要的朋友可以参考下2023-11-11
vue3中defineEmits与defineProps的用法实例
这篇文章主要介绍了vue3中defineEmits/defineProps的用法实例,需要的朋友可以参考下2023-12-12
这篇文章主要介绍了vue使用nprogress加载路由进度条的方法，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-06-06
这篇文章主要介绍了关于vue中的rules表单验证(常用)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-06-06
最新评论