vue v-for 遍历不能正常显示的问题，

畢林茂

已于 2022-04-05 08:06:30 修改

阅读量2.6k

点赞数

分类专栏： Vue Error 文章标签： vue

于 2022-04-04 01:51:54 首次发布

本文链接：https://blog.csdn.net/nilmao/article/details/123947893

版权

Vue 同时被 2 个专栏收录

26 篇文章 3 订阅

订阅专栏

Error

7 篇文章 0 订阅

订阅专栏

vue 项目用v-for遍历图片，不能正常显示的问题，

data() {
    return {
      imgList:[
        {
          imgUrl:'../assets/img/a.png',
          imgLink:'',
          type:''
        },
        {
          imgUrl:'../assets/img/b.png',
          imgLink:'',
          type:''
        },
        {
          imgUrl:'../assets/img/c.png',
          imgLink:'',
           type:''
        },
        {
          imgUrl:'../assets/img/d.png',
          imgLink:'',
          type:''
        },
        {
          imgUrl:'../assets/img/e.png',
          imgLink:'',
          type:''
        }
      ]

废话不多说；

包一个 require( ) 搞定

require('../assets/img/a.png')

data() {
    return {
      imgList:[
        {
          imgUrl:require('../assets/img/a.png'),
          imgLink:'',
          type:''
        },
        {
          imgUrl:require('../assets/img/b.png'),
          imgLink:'',
          type:''
        },
        {
          imgUrl:require('../assets/img/c.png'),
          imgLink:'',
           type:''
        },
        {
          imgUrl:require('../assets/img/d.png'),
          imgLink:'',
          type:''
        },
        {
          imgUrl:require('../assets/img/e.png'),
          imgLink:'',
          type:''
        }
      ]