做一个轮播图,给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>

v-for给img的src动态赋值问题的更多相关文章

  1. vue关于img src动态赋值问题

    解决方法: 加个require()就可以了 <img :src="require('../assets/images/'+imgsrc+'.png')"/>

  2. jQuery Distpicker插件 省市区三级联动 动态赋值修改地址

    在获取创建页面数据后需要在编辑页面调取之前提交的数据,在使用这个插件后发现无法动态赋值,查找资料后发现需要先销毁实例,$(’#target’).distpicker(‘destroy’); 第一步 引 ...

  3. Highcharts动态赋值学习

    最近老大让做项目中的统计图表功能,需要使用highcharts这个插件,弄出来了两种类型的图表动态赋值的实现,首先贴上中文网的官网和api地址,使用这个英语不好的同学肯定会用到的: 中文网官网:htt ...

  4. URL动态赋值

    url动态赋值: 指的是url中包含{selector},即花括号括起来的jQuery选择器,当提交该url时,框架会自动将selector对应元素的值替换到花括号所占区域. (感觉实现了一点类似el ...

  5. 使用 Attribute +反射 来对两个类之间动态赋值

    看同事使用的 一个ORM 框架 中 有这样一个功能  通过特性(附加属性)的功能来 实现的两个类对象之间动态赋值的 功能 觉得这个功能不错,但是同事使用的 ORM 并不是我使用的  Dapper  所 ...

  6. Jquery为下拉列表动态赋值与取值,取索引

    接触前端也不久对jquery用的也只是皮毛,写过去感觉能复用的发出来,大家指点下 1.下拉列表动态赋值 function initddlYear() { var mydate = new Date() ...

  7. Oracle游标动态赋值

    1. oracle游标动态赋值的小例子 -- 实现1:动态给游标赋值 -- 实现2:游标用表的rowtype声明,但数据却只配置表一行的某些字段时,遍历游标时需fetch into到精确字段 CREA ...

  8. javascript如何解析json对javascript如何解析json对象并动态赋值到select列表象并动态赋值到select列表

    原文 javascript如何解析json对象并动态赋值到select列表 JSON(JavaScriptObject Notation)一种简单的数据格式,比xml更轻巧.JSON是JavaScri ...

  9. C# 实体/集合差异比较,比较两个实体或集合值是否一样,将实体2的值动态赋值给实体1(名称一样的属性进行赋值)

    /// <summary> /// 实体差异比较器 /// </summary> /// <param name="source">源版本实体& ...

随机推荐

  1. linux nc 命令详解

    linux nc命令使用详解 功能说明:功能强大的网络工具语 法:nc [-hlnruz][-g<网关...>][-G<指向器数目>][-i<延迟秒数>][-o&l ...

  2. reduce深入理解

    // map console.log([1, 2, 3, 4, 5].reduce((a, v) => { a.push(v * v); return a },[])); //filter co ...

  3. DestroyImmediate和Destroy

    DestroyImmediate立即对对像进行销毁并从内存中移除: Destroy销毁场景中的物体,但内存中还存在,当令它需要销毁时,只是给一个标识.而内存中它依然是存在的,只有当内存不够,或一段时间 ...

  4. java 简单工具

    1.String操作 /** * 根据正则字符串过滤不需要的字符串 * @param arr * @param regex * @return */ public static String[] fi ...

  5. 动态代理(二)—— CGLIB代理原理

    前篇文章动态代理(一)--JDK中的动态代理中详细介绍了JDK动态代理的Demo实现,api介绍,原理详解.这篇文章继续讨论Java中的动态代理,并提及了Java中动态代理的几种实现方式.这里继续介绍 ...

  6. Oracle 加解密教程

    参考Oracle官方文档 在Oracle使用dbms_crypto包进行加解密 首先,授权当前用户使用加解密包 在sql中运行:connect sqlplus as sysdbagrant execu ...

  7. 正则表达式回溯导致的CPU打满

    参考: https://my.oschina.net/ttscjr/blog/2208526 https://mp.weixin.qq.com/s?__biz=MzA4MjIyNTY0MQ==& ...

  8. 简约而不简单的Django2.2 新手图文教程

     欢迎大家访问我的个人网站<刘江的博客和教程>www.liujiangblog.com  主要分享Python 及Django教程以及相关的博客! 版权所有,转载需注明来源! 2019年7 ...

  9. English--状语从句

    English|状语从句 现在开始讲述关于状语从句的内容,由于内容略难并且略多,我将换个简单的方式帮助理解,这一块有些东西是需要记忆的.虽然是记忆,但是我可以保证记忆的内容是知识. 前言 目前所有的文 ...

  10. pandas 之 字符串处理

    import numpy as np import pandas as pd Python has long been a popular raw data manipulation language ...