zoukankan      html  css  js  c++  java
  • v-for给img的src动态赋值问题

    做一个轮播图,给img赋值src

    <el-carousel-item v-for="(item, index) in carouselImgs" :key="index">
            <img  :src="item.url" alt="一张宣传图片" height="400">
              <!-- <img src="../../assets/images/home/banner-04.6b52be3.png" alt=""> --> // 注释
          </el-carousel-item>
    return {
            carouselImgs: [
              {url: '../../assets/images/home/banner-01.fd6a45e.png'},
              {url: '../../assets/images/home/banner-02.0901fd3.png'},
              {url: '../../assets/images/home/banner-03.7f1d6b0.png'},
              {url: '../../assets/images/home/banner-04.6b52be3.png'}
            ]
         }

    发现全部都加载失败了,原因是webpack把图片作为模块处理,下面是解决方法

    return {
            carouselImgs: [
              {url: require('../../assets/images/home/banner-01.fd6a45e.png')},
              {url: require('../../assets/images/home/banner-02.0901fd3.png')},
              {url: require('../../assets/images/home/banner-03.7f1d6b0.png')},
              {url: require('../../assets/images/home/banner-04.6b52be3.png')}
            ]
         }

    对于轮播图,也可以作为背景图去做

    <div :style="{backgroundImage: 'url('+ item.url +')'}"></div>
  • 相关阅读:
    some math words
    图论中匹配问题的三种算法
    如何查看静态库和动态库是32位还是64位
    C/C++语言的版本, Visual Studio版本
    codeblocks
    文件类型
    上海职称评定
    微信登录
    手机归属地查询
    创建AOP静态代理(上篇)
  • 原文地址:https://www.cnblogs.com/czy960731/p/11158868.html
Copyright © 2011-2022 走看看