vue3循环展示图片

最新推荐文章于 2025-11-10 09:36:03 发布
原创 最新推荐文章于 2025-11-10 09:36:03 发布 · 389 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #前端 #javascript

如图，根据 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实现循环滚动图片（多图片轮播）
蜗牛~~
11-16 1万+
效果（循环滚动，可切换方向）： 轮播组件BaseSwiper.vue： <template> <div class="swiperBox"> <img class="imgLeft" @click="clickLeft" src="../../../assets/img/左.png" alt=""> <img class="imgRight" @click="clickRight" src="../../../a..
vue vue3 走马灯Carousel
在职可交流前端开发，包括：web端、uniapp等，欢迎指教。
03-26 2690
走马灯实现多张图片轮播展示，element组件的官网有详细介绍。走马灯的图片点击预览需要给图片绑定一个自定义点击事件
vue3 v-for动态循环本地图片，不能使用require
weixin_57925162的博客
05-04 1441
require 是属于 Webpack 的方法,在v3+vite的项目里面并不适用，详情请看vite文档。方法来实现渲染动态渲染本地图片。这里使用vite官网文档的。
如何用Vue3打造吸睛动态效果？vue3-marquee组件的创新实践
最新发布
gitblog_00040的博客
11-10 392
作为前端开发者，我们都知道动态效果是提升用户体验的关键，但实现起来却常常遇到各种棘手问题。本文将从实际开发痛点出发，介绍如何使用vue3-marquee组件轻松实现专业级动态效果，以及它在不同行业场景中的创新应用。 📌 **第一部分：网页动效设计的常见痛点** 在日常开发中，我发现实现流畅的动态效果总是面临三个典型挑战： **1. 无缝滚动的"断裂感"** 当内容滚动到边界时，传统实现
文字跑马灯动画效果
m0_70977931的博客
06-25 886
文字跑马灯效果 vue3 组件
vue3中如何循环本地图片
qq_43405603的博客
08-30 1769
vue3中如何循环本地图片
vue3本地图片 for循环加载的方法
xzkx325的博客
06-11 1236
使用路径拼接名称后的字符串 当作键名 然后加载图片。第四步 直接页面中v-for循环即可。关键是 图片是异步加载的。
vue3 中心大 展示部分 轮播图 swiper
10-30
当提到在Vue3中实现一个中心大展示部分的轮播图时，Swiper是一个经常会考虑使用的库。Swiper是一个功能强大的纯JavaScript滑动插件，它不仅支持触摸滑动，还支持桌面鼠标滑动，并且拥有丰富的API以及自由定制的选项...
vue2.0 循环遍历加载不同图片的方法
08-27
在Vue 2.0中，实现循环遍历加载不同图片主要依赖于模板语法和数据绑定。下面我们将深入探讨这一主题，...这种方法使得在Vue应用中动态展示一组不同的图片变得非常简单和灵活，可以根据需要轻松地扩展或修改图片数组。
解决vue的 v-for 循环中图片加载路径问题
10-18
在这种情况下，我们通常会将图片的路径和名称作为数据返回给前端，然后通过`v-for`循环展示这些图片。 例如，数据结构如下： ```javascript [ { CnName: &#39;荷花&#39;, EnName: &#39;lotus&#39; }, { CnName: &#39;康乃馨&#39;, EnName...
精选资源
vue+axios展示二进制文件流图片
01-20
在Vue.js应用中，我们经常需要从服务器获取并展示图片。在这种情况下，如果图片是以二进制文件流的形式传输，我们需要特殊的方法来处理和显示这些数据。本文将详细讲解如何利用axios库进行二进制文件流的请求，并...
精选资源
在vue3+ts+setup语法糖中使用图片预览组件
09-14
本教程将详细讲解如何在Vue3项目中结合TypeScript和`setup`语法糖实现图片预览功能。 首先，让我们了解Vue3的核心变化。Vue3引入了Composition API，它允许开发者更灵活地组织和重用组件逻辑。`setup`函数是...
vue循环展出图片 -----独家秘方，限时删除
程序员小哲的博客
03-08 5460
vue循环展出图片html代码js代码整体代码礼品 格式是这样千万别写错了！！！，再有问题私聊我，微信：ppz2759 <img v-bind:src=“site.name” /> html代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>程序员小...
Vue v-for :src 循环显示图片
weixin_43637766的博客
04-21 2914
Vue v-for :src 循环显示图片
js-vue循环展示图片与循环展示选中块-u-popup过滤
岂不闻
10-24 507
vue循环展示图片与循环展示选中块-u-popup过滤
vue3循环遍历图片渲染无效果
limif的博客
10-18 2362
路径写成"'../../assets/situation/'+item.img+'.png'"会没有效果。循环遍历展示图片：（注释部分也是可以渲染出来）绑定的图片路径必须写成src开头，也就是根目录,
vue 中循环显示多个图片
热门推荐
luckydog
08-20 1万+
首先准备图片 代码如下 // 第一种 <img :src="require(`./assets/image/${item.img}.png`)" width="100%" height="100px" alt=""> skinArr: [ {name: 'default', theme: 'default', desc: '默认皮肤', img: 'skin-default'}, {name: 'dark', theme: 'dark', desc: '黑暗之神', img: 'sk
vue使用for循环展示图片列表
weixin_44281416的博客
01-12 2949
<div class="icon-list-container"> <div class="icon-list" v-for="item in items" :key="item.name"> <!--此处是vue加入图片的一种方法 --> <img :img="base64Config[`${item.icon}`]" alt="" /> </div> </div> return{ base64Conf
vue3循环展示本地图片
09-17
在 Vue 3 中循环展示本地图片，可按以下步骤操作： ### 1. 整理图片数据 在组件的 `data` 选项（组合式 API 中使用 `reactive` 或 `ref`）里，把图片的路径用数组组合起来。例如： ```vue <template> <!-- 后续遍历图片的代码将写在这里 --> </template> <script setup> import { ref } from &#39;vue&#39;; // 使用 ref 定义响应式数据 const content_top = ref([ { title: &#39;图片1&#39;, src: &#39;./imges/a.png&#39;, key: &#39;0&#39; }, { title: &#39;图片2&#39;, src: &#39;./imges/b.png&#39;, key: &#39;1&#39; }, { title: &#39;图片3&#39;, src: &#39;./imges/c.png&#39;, key: &#39;2&#39; } ]); </script> ``` ### 2. 在模板中遍历数组 在 `template` 模块中把数组遍历出来。但需注意，直接使用路径图片可能加载不出来，因编译器对动态路径处理存在问题，需在路径前加 `require`。 ```vue <template> <div> <div v-for="item in content_top" :key="item.key"> <!-- 使用 require 处理图片路径 --> <img :src="require(item.src)" :alt="item.title"> <p>{{ item.title }}</p> </div> </div> </template> <script setup> import { ref } from &#39;vue&#39;; const content_top = ref([ { title: &#39;图片1&#39;, src: &#39;./imges/a.png&#39;, key: &#39;0&#39; }, { title: &#39;图片2&#39;, src: &#39;./imges/b.png&#39;, key: &#39;1&#39; }, { title: &#39;图片3&#39;, src: &#39;./imges/c.png&#39;, key: &#39;2&#39; } ]); </script> ``` ### 3. 处理路径拼接问题 若路径拼接较复杂，可编写一个函数处理。例如： ```vue <template> <div> <div v-for="item in content_top" :key="item.key"> <!-- 调用函数获取图片路径 --> <img :src="getImgUrl(item.src, &#39;png&#39;)" :alt="item.title"> <p>{{ item.title }}</p> </div> </div> </template> <script setup> import { ref } from &#39;vue&#39;; const content_top = ref([ { title: &#39;图片1&#39;, src: &#39;a&#39;, key: &#39;0&#39; }, { title: &#39;图片2&#39;, src: &#39;b&#39;, key: &#39;1&#39; }, { title: &#39;图片3&#39;, src: &#39;c&#39;, key: &#39;2&#39; } ]); // 处理图片路径的函数 const getImgUrl = (url, type) => { if (type === &#39;png&#39;) { const a = require(&#39;../../assets/img/index/&#39; + url + &#39;.png&#39;); return a; } else if (type === &#39;jpg&#39;) { const b = require(&#39;../../assets/img/index/&#39; + url + &#39;.jpg&#39;); return b; } }; </script> ``` ### 注意事项 - `assets` 在项目编译时会被 `webpack` 处理解析为模块依赖，只支持相对路径形式，加载图片模块通过 `webpack` 的 `url-loader` 加载器实现，而 `url-loader` 解析不了动态绑定的 `src`，所以要用相对路径 `src` 引入 [^2]。 - `required` 引入路径需要拼接，不能直接 `required(imgpath)` [^3]。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值