用vue v-for循环图片路径

最新推荐文章于 2024-06-11 14:23:13 发布
最新推荐文章于 2024-06-11 14:23:13 发布
阅读量3.6k 收藏 6
点赞数 2
分类专栏： vue 文章标签： 用vue v-for循环图片路径
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43486347/article/details/103472946
版权

用vue v-for循环图片路径

在这里插入图片描述

<template>
  <el-carousel :interval="4000" type="card" height="200px">
    <el-carousel-item v-for="(item, index) in img" :key="index">
      <!-- <h3 class="medium">{{ item }}</h3> -->
      <img :src="item.imgersssd">
    </el-carousel-item>
  </el-carousel>
</template>

<script>
import axios from 'axios'
export default {
  name: 'HelloWorld',
  data () {
    return {
        msg:"dkjskjffdsfdds",
        img:[
          {imgersssd:require("../images/u=29.jpg")},
          {imgersssd:require("../images/u=4249.jpg")},
          {imgersssd:require("../images/u=21967.jpg")},
          {imgersssd:require("../images/u=30419.jpg")},
          {imgersssd:require("../images/u=3422733.jpg")},
          {imgersssd:require("../images/u=37901902.jpg")} 
        ]
    }
  },
  mounted(){
  //  this.getData()
  },
  methodes:{
    // getData(){
    //   axios.get().then(res=>{
    //     if(res.data.code == '200'){
    //       if(res.data.result && res.data.result.length>0){

    //       }
    //       console.log(res)
    //     }
    //   },error=>{

    //   })
    // }
  }
}
</script>

<style>
.el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
  }
  
  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }
  
  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
</style>
抑制、
关注
  • 2
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue循环图片本地存储的图片路径问题
青衣的博客
04-10 357
html <swiper-item v-for="item in swiperList" :key='item.id'> <view class="swiper-item"> <image :src="item.url" mode=""></image> </view> </swiper-item> js放在data里 swiperList: .
解决vue v-for src 图片路径问题 404
01-21
<Radio v-for='a in radio_arr' label={{a}}> export default { data(){ return{ radio_arr:['循环1','循环2','循环3'], animal:'循环2' } } } 报错信息： 修改代码如下： 修改内容为 label={{a}} 修改为 ...
解决vue的 v-for 循环中图片加载路径问题
10-18
今天小编就为大家分享一篇解决vue的 v-for 循环中图片加载路径问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue使用for循环展示图片列表
weixin_44281416的博客
01-12 2777
<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本地图片 for循环加载的方法
最新发布
xzkx325的博客
06-11 223
使用路径拼接名称后的字符串 当作键名 然后加载图片。第四步 直接页面中v-for循环即可。关键是 图片是异步加载的。
vue的v-for循环中图片加载路径问题
qq_47648083的博客
11-17 3810
vue的v-for循环中图片加载路径问题 产品要求 要求图片和它的名字一一对应， vue中的img的src可以动态绑定到一个变量上 <template> <div id="app"> <ul> <li v-for ="a,b in data" :key="b"> <img :src="a.url" alt="flowers"> <p>{{item}}</p>
vue-for循环输出图片-数组
weixin_33774883的博客
05-15 9307
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;vue-for循环输出图片-数组&lt;/title&gt; &lt;style type="text/css"&gt; .a1{ margin: 5
Vue用v-for给循环标签自身属性添加属性值的方法
10-17
总结来说，Vue.js中使用`v-for`给循环标签添加属性值时，需要理解如何正确地动态绑定属性（使用`:`或`v-bind`），以及在处理图片路径时如何确保Webpack能识别和处理这些路径。通过`require()`、`import`或使用`...
关于vue v-for循环解决img标签的src动态绑定问题
01-19
在解决这个问题上，遇到了很多错误的方案，一直没有跑通，有些是图片标记出现了，但是图片内容没有出现，这就很让人头疼了，下面，我讲解我操作成功的案例吧。 1、目录结构如下 图片放置在与src同级的static文件夹...
【Vue】v-for循环图片绝对路径，图片无法显示
Owen的博客
10-31 1968
1、src 和 :src <swiper-slide v-for="item of swiperList" :key='item.id'> <img :src="item.srcUrl" /> <!--<img v-bind:src="item.srcUrl" />--> </swiper-slide> 图片循环的时候，要用 :src，是 v-bind:src 的简写形式。 2、第一种情况：如果图片放在 src 文件夹下
vue v-for遍历图片路径
skylar的博客
09-29 651
vue v-for遍历图片链接
vue中v-for循环图片路径，图片不显示的解决办法
热门推荐
qq_39561207的博客
03-12 1万+
将imgUrl加上require 注意：使用require的时候可能出现错误unresolved function or method require 解决办法：
vue v-for 遍历图片的时候，正常写法src里的路径读不出来
qq_36940740的博客
08-17 1万+
v-for 遍历数据 例如要遍历class="commodity_right_content_goods“的div那么就把v-for加在上面。 item in goodsImg ：item为循环的指针，可以一条一条把数组中的数据遍历出来，goodsImg ：为数据数组。 后面还需要再跟上：key ="item.id" 就是你如果只是简单的渲染数据，不对此Dom做增删的操作，那确实加不加都可...
Vue v-for :src 循环显示图片
weixin_43637766的博客
04-21 2713
Vue v-for :src 循环显示图片
v-for 循环遍历图片路径加载图片
虎康的博客
03-13 1124
这篇文章的话，项目部署后，会出现图片资源请求成功但未加载到页面上的问题，因此需要使用 import 导入。要循环遍历加载图片，就需要对图片进行处理，建议使用 import 进行导入，如果使用。
vue中动态设置for循环里img的src值
changyana的博客
04-17 2054
试了20分钟，终于搞出来了，记录一下。 我的for循环如图 想要根据每个index显示不同的图片（注意index是默认从0开始，所以你图片的编号也需要从0开始，如果图片编号从1开始的话，第一栏将没有图片展示） 则在img里的语句如下 <image class="img" :src="'../../static/article/article'+index+'.jpg'"></image> 展现结果如下：大功告成！ ...
Vue 中使用 v-for 展示不同的图片
cdd9527的博客
01-13 1305
Vue 中展示在 v-for 展示不同的图片
vue v-for循环图片怎么删除最后一个图片
03-30
删除最后一张图片需要知道图片列表的长度，可以使用数组的 `pop()` 方法删除最后一个元素。具体实现步骤如下： 1. 在 Vue 实例的 `data` 属性中添加一个图片列表数组 `imageList`，存放所有图片的路径。 2. 在模板中使用 `v-for` 循环图片列表，将每张图片显示出来。 3. 添加一个按钮，绑定一个点击事件，点击按钮时执行删除操作。 4. 在点击事件中，使用 `imageList.pop()` 方法删除最后一张图片。 示例代码如下： ``` <template> <div> <div v-for="(image, index) in imageList" :key="index"> <img :src="image"> </div> <button @click="deleteLastImage">删除最后一张图片</button> </div> </template> <script> export default { data() { return { imageList: [ 'https://example.com/image1.jpg', 'https://example.com/image2.jpg', 'https://example.com/image3.jpg', ] } }, methods: { deleteLastImage() { this.imageList.pop(); } } } </script> ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值