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

目录
  • v-for循环图片路径
  • 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>

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 解决vue的 v-for 循环中图片加载路径问题

    先看一下产品需求,如下图所示, 产品要求图片和它的名称一一对应,本来是非常简单的需求,后台直接返回图片路径和名称,前台直接读取就可以了,但是我们没有存储图片的服务器,再加上是一个实验性的需求,图片需要存放到前台.当时我想,vue 中的img 的src 可以动态绑定到一个变量上, 很简单吗,就没有考虑太多,直接开始做了. 首先和后台商量一下数据结构,因为图片要和名称一一对应,所以后台要返回中英文的名称的映射,我把前台的图片名称直接设置给后台给的英文名称,从而读取图片,图片和中文名称就一一对应了.数

  • vue中 v-for循环的用法详解

    1.v-for循环普通数组 ①创建vue对象 ② 循环数据 结果: 2.v-for循环对象数组 ① 创建vue实例对象 ② 循环对象数组 结果: 3.v-for循环对象 ①创建vue对象实例 ②循环对象 结果: 4.v-for循环数字 ①创建vue对象实例 ②循环数字 结果: 5.v-for中key的使用方式 ①创建vue对象实例 注意:push()方法一般是添加到数组的最后的位置:unshift()方法是往最前面的位置添加. ②循环 注意: v-for循环的时候,key属性只能使用number

  • 解决vue v-for src 图片路径问题 404

    我的代码结构如下所示不能执行,会出现报错 <RadioGroup v-model="animal"> <Radio v-for='a in radio_arr' label={{a}}></Radio> </RadioGroup> export default { data(){ return{ radio_arr:['循环1','循环2','循环3'], animal:'循环2' } } } 报错信息: 修改代码如下: 修改内容为 la

  • 关于vue v-for循环解决img标签的src动态绑定问题

    在解决这个问题上,遇到了很多错误的方案,一直没有跑通,有些是图片标记出现了,但是图片内容没有出现,这就很让人头疼了,下面,我讲解我操作成功的案例吧. 1.目录结构如下 图片放置在与src同级的static文件夹下,在这里,我放置在slider中 2.数据配置如下: 注意引入的路径,直接从static文件中对应的地方引入. data () { return { product:[ { "src":'../../static/slider/logo1.jpg', "decerat

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

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

    目录 v-for循环图片路径 v-for循环图片无法显示 解决方法 v-for循环图片路径 <template> <el-carousel :interval="4000" type="card" height="200px"> <el-carousel-item v-for="(item, index) in img" :key="index"> <!-- <

  • vue中本地静态图片路径写法

    这里写图片描述 需求:如何components里面的index.vue怎样能把assets里面的图片拿出来. 1.在img标签里面直接写上路径: <img src="../assets/a1.png" class="" width="100%"/> 2.利用数组保存再循环输出: <el-carousel-item v-for="item in carouselData" :key="item.id&

  • vue webpack打包后图片路径错误的完美解决方法

    vue webpack打包后图片路径错误的完美解决方法

    项目用run dev build 打包后,发现很多图片都不显示,在本地是没有问题的啊!找原因发现通过webpack+vuecli默认打包的css.js等资源,路径都是绝对的. 因为我们的图片路径都是经历过文件夹的,在本地引用图片是绝对路径,但打包后因为把配置的static文件夹当成了根路径,所以很多图片找不到都不显示. 解决办法如图: (1). 修改 assetsPublicPath: './' (2).打开webpack.prod.conf.js,在output:增加 publicPath:

  • vue的三种图片引入方式代码实例

    这篇文章主要介绍了vue的三种图片引入方式代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 首先给图片地址绑定变量: <template> <img :src="imgUrl"> </template> 在script中设置变量: //方法1:直接将图片引入为模块 require imgUrl from "../assets/test.png" //方法2:把imgUrl放

  • 详解Vue.js中引入图片路径的几种方式

    vue --version 3.6.3 记录总结一下的Vue中引入图片路径的几种书写方式 vue中静态资源的引入机制 Vue.js关于静态资源的官方文档 静态资源可以通过两种方式进行处理: 在 JavaScript 被导入或在 template/CSS 中通过相对路径(以 . 开头)被引用.这类引用会被 webpack 处理. 诸如 <img src="..."> . background: url(...) 和 CSS @import 的资源 例如, url(./imag

  • Vue.js中的图片引用路径的方式

    当我们在Vue.js项目中引用图片时,关于图片路径有以下几种情形: 使用一 我们在data里面定义好图片路径 imgUrl:'../assets/logo.png' 然后,在template模板里面 /*错误写法*/ <img src="{{imgUrl}}"> 这样是错误的写法,我们应该用v-bind绑定图片的srcs属性 <img :src="imgUrl"> 或者 <img src="../assets/logo.png

  • vue 项目打包时样式及背景图片路径找不到的解决方式

    问题描述:vue项目打包后,文件找得到,但是引用的字体及背景图片找不到: 解决方法: 主要是需要单独为 css 配置 publicPath . ExtractTextWebpackPlugin 提供了一个 options.publicPath 的 api,可以为css单独配置 publicPath . 对于用 vue-cli 生成的项目,dist 目录结构如下: dist ├── index.html └── static     ├── css     ├── img     └── js 经

  • vue实现图片路径转二进制文件流(binary)

    目录 图片路径转二进制文件流(binary) 图片路径转换为Base64 Base64转换为二进制文件流(binary) 下载二进制流文件 Blob.ajax(axios) 图片路径转二进制文件流(binary) vue项目中,需要将本地的图片或前端生成的图片传回后端,传回给后端需要将图片路径转换为二进制文件流,也就是参数中显示的(binary),这时就需要进行图片路径的转换. 图片路径转换为Base64 imageUrlToBase64(imageUrl) {   let image = ne

  • vue中如何动态绑定图片,vue中通过data返回图片路径的方法

    vue中如何动态绑定图片,vue中通过data返回图片路径的方法

    在项目中遇到需要动态加载图片路径,图片路径并非是从后台获取过来的数据. 因此在data中必须用require加载,否则会当成字符串来处理. HTML如下: JS如下: 以上这篇vue中如何动态绑定图片,vue中通过data返回图片路径的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们. 您可能感兴趣的文章: Vue.js中的图片引用路径的方式 基于vue 动态加载图片src的解决方法 vue cli使用绝对路径引用图片问题的解决

随机推荐