广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >使用vue v-for循环图片路径方式
  • 889
分享到

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

2024-04-02 19:04:59 889人浏览 独家记忆
摘要

目录v-for循环图片路径v-for循环图片无法显示解决方法v-for循环图片路径 <template> <el-carousel :interval="40

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>

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。

--结束END--

本文标题: 使用vue v-for循环图片路径方式

本文链接: https://www.lsjlt.com/news/145358.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • 使用vue v-for循环图片路径方式
    目录v-for循环图片路径v-for循环图片无法显示解决方法v-for循环图片路径 <template> <el-carousel :interval="40...
    99+
    2022-11-13
  • 怎么使用vue的v-for循环图片路径
    这篇“怎么使用vue的v-for循环图片路径”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“怎么使用vue的v-for循环图片...
    99+
    2023-06-29
  • 如何解决vue的v-for循环中图片加载路径问题
    这篇文章将为大家详细讲解有关如何解决vue的v-for循环中图片加载路径问题,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。先看一下产品需求,如下图所示,产品要求图片和它的...
    99+
    2022-10-19
  • Vue中实现v-for循环遍历图片的方法
    目录v-for循环遍历图片的方法解决方法如下vue循环显示多个图片小扩展(require 和 import)v-for循环遍历图片的方法 写项目时,遇到后台无法提供背景图片,需要自己...
    99+
    2022-11-13
  • 如何使用Vue的v-for循环
    这篇文章主要介绍“如何使用Vue的v-for循环”,在日常操作中,相信很多人在如何使用Vue的v-for循环问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”如何使用Vue的v-...
    99+
    2022-10-19
  • 编写Vue v-for循环的方式有哪些
    这篇文章主要讲解了“编写Vue v-for循环的方式有哪些”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“编写Vue v-for循环的方式有哪些”吧!这在碰到诸如以下情况时...
    99+
    2023-06-22
  • v-for循环中使用require/import关键字引入本地图片的几种方式
    目录问题描述 方式一(后端返回图片URL) 方式二(前端使用require) 方式三(前端使用import) 总结 问题描述 我们做项目中,常常需要把图片呈现到页面上,一般来说有以...
    99+
    2022-11-12
  • 在vue中v-for循环遍历图片不显示错误的解决方案
    目录v-for循环遍历图片不显示错误错误vue本地图片路径正确,但for循环不显示经过改正加个require()就可以显示了v-for循环遍历图片不显示错误 <template...
    99+
    2022-11-13
  • vue图片转base64本地路径跨域方式
    目录图片转base64本地路径跨域问题描述解决方案图片转成base64跨域等安全限制及解决图片转base64本地路径跨域 问题描述 代码 getUrlBase64(url, ext...
    99+
    2022-11-13
  • vue cli中怎么使用绝对路径引用图片
    这期内容当中小编将会给大家带来有关vue cli中怎么使用绝对路径引用图片,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。在页面中使用绝对路径可通过在js中用 requir...
    99+
    2022-10-19
  • Vue如何使用v-for给循环标签自身属性添加属性值
    这篇文章给大家分享的是有关Vue如何使用v-for给循环标签自身属性添加属性值的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。我的代码结构如下所示不能执行,会出现报错<Rad...
    99+
    2022-10-19
  • html图片标签、绝对路径和相对路径的使用方法是什么
    本篇内容介绍了“html图片标签、绝对路径和相对路径的使用方法是什么”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学...
    99+
    2022-10-19
  • Python使用for实现无限循环的方式有哪些
    这篇文章主要介绍“Python使用for实现无限循环的方式有哪些”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“Python使用for实现无限循环的方式有哪些”文章能帮助大家解决问题。Python使用...
    99+
    2023-07-05
  • Python使用for实现无限循环的多种方式汇总
    目录Python使用for实现无限循环python遍历循环与无限循环遍历循环无限循环循环控制保留字循环的高级用法总结Python使用for实现无限循环 # 方法1.1:借助循环遍历列...
    99+
    2023-03-02
    Python使用for Python无限循环 Python for无限循环
  • vue使用Canvas在画布上添加图片方式
    目录使用Canvas在画布上添加图片使用canvas在图片上加上文字总结使用Canvas在画布上添加图片 首先在template 里面创建一个dom <div style="d...
    99+
    2023-05-16
    vue使用Canvas Canvas在画布添加图片 vue Canvas画布添加图片
  • vue-cli项目使用vue-picture-preview图片预览组件方式
    目录使用vue-picture-preview图片预览组件使用有赞ImagePreview(图片预览)遇到的问题解决方案使用vue-picture-preview图片预览组件 下载安...
    99+
    2022-11-13
  • 使用vue和element-ui上传图片及视频文件方式
    目录效果图上传后图片上传视频上传项目使用vue+element-ui,实现了表单多图上传图片,上传视频,以及表单图片回显,视频回显,表格渲染图片等功能 效果图 上传后 图片可回显,...
    99+
    2022-11-13
    vue element-ui element-ui上传图片 element-ui视频文件
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作