使用vue v-for循环图片路径方式

 更新时间:2022年04月08日 11:43:23   作者:抑制、  
这篇文章主要介绍了使用vue v-for循环图片路径方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

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>

v-for循环图片无法显示

解决方法

使用require调用路径

<div v-for="(item, index) in imgList" :key="index">
    <img :src="item">
</div>
<script>
export default {
  data() {
    return { 
      imgList:['require("../../assets/a.jpg")','require("../../assets/b.jpg")']
    };
  },
};
</script>

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • element表格el-table实现虚拟滚动解决卡顿问题

    element表格el-table实现虚拟滚动解决卡顿问题

    当页面数据过多,前端渲染大量的DOM时,会造成页面卡死问题,本文主要介绍了element表格el-table实现虚拟滚动解决卡顿问题,具有一定的参考价值,感兴趣的可以了解一下
    2023-10-10
  • vue使用elementUI组件实现分页效果

    vue使用elementUI组件实现分页效果

    分页在展示数据列表的场景肯定是非常多的,一般的项目开发中,数据量特别大,一般都是后端接口直接处理分页返回,前端直接调用即可,本文给大家介绍了vue使用elementUI组件实现分页效果,需要的朋友可以参考下
    2023-12-12
  • vue-mugen-scroll组件实现pc端滚动刷新

    vue-mugen-scroll组件实现pc端滚动刷新

    这篇文章主要为大家详细介绍了vue-mugen-scroll组件实现pc端滚动刷新,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-08-08
  • vite+vue3+element-plus搭建项目的踩坑记录

    vite+vue3+element-plus搭建项目的踩坑记录

    这篇文章主要介绍了vite+vue3+element-plus搭建项目的踩坑记录,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • 超详细图解如何运行vue项目

    超详细图解如何运行vue项目

    Vue是一套用于构建用户界面的渐进式框架,它的核心库只关注视图层,易于上手,也便于与其他库或已有项目整合,下面这篇文章主要给大家介绍了关于如何运行vue项目的相关资料,需要的朋友可以参考下
    2023-05-05
  • vant/vue跨域请求解决方案

    vant/vue跨域请求解决方案

    这篇文章主要介绍了vant/vue跨域请求解决方案,需要的朋友可以参考下
    2022-12-12
  • vue3 hook重构DataV的全屏容器组件详解

    vue3 hook重构DataV的全屏容器组件详解

    这篇文章主要为大家介绍了vue3 hook重构DataV的全屏容器组件详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-04-04
  • Vue前端如何实现生成PDF并下载功能详解

    Vue前端如何实现生成PDF并下载功能详解

    在前端的岗位上经常需要实现个生成个并下载的可视化图表页PDF文件,这篇文章主要给大家介绍了关于Vue前端如何实现生成PDF并下载功能的相关资料,需要的朋友可以参考下
    2021-10-10
  • vue2.0 下拉框默认标题设置方法

    vue2.0 下拉框默认标题设置方法

    今天小编就为大家分享一篇vue2.0 下拉框默认标题设置方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • ElementUI如何修改Dialog的标题样式

    ElementUI如何修改Dialog的标题样式

    这篇文章主要介绍了ElementUI如何修改Dialog的标题样式问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10

最新评论