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>
v-for给img的src动态赋值问题的更多相关文章
- vue关于img src动态赋值问题
解决方法: 加个require()就可以了 <img :src="require('../assets/images/'+imgsrc+'.png')"/>
- jQuery Distpicker插件 省市区三级联动 动态赋值修改地址
在获取创建页面数据后需要在编辑页面调取之前提交的数据,在使用这个插件后发现无法动态赋值,查找资料后发现需要先销毁实例,$(’#target’).distpicker(‘destroy’); 第一步 引 ...
- Highcharts动态赋值学习
最近老大让做项目中的统计图表功能,需要使用highcharts这个插件,弄出来了两种类型的图表动态赋值的实现,首先贴上中文网的官网和api地址,使用这个英语不好的同学肯定会用到的: 中文网官网:htt ...
- URL动态赋值
url动态赋值: 指的是url中包含{selector},即花括号括起来的jQuery选择器,当提交该url时,框架会自动将selector对应元素的值替换到花括号所占区域. (感觉实现了一点类似el ...
- 使用 Attribute +反射 来对两个类之间动态赋值
看同事使用的 一个ORM 框架 中 有这样一个功能 通过特性(附加属性)的功能来 实现的两个类对象之间动态赋值的 功能 觉得这个功能不错,但是同事使用的 ORM 并不是我使用的 Dapper 所 ...
- Jquery为下拉列表动态赋值与取值,取索引
接触前端也不久对jquery用的也只是皮毛,写过去感觉能复用的发出来,大家指点下 1.下拉列表动态赋值 function initddlYear() { var mydate = new Date() ...
- Oracle游标动态赋值
1. oracle游标动态赋值的小例子 -- 实现1:动态给游标赋值 -- 实现2:游标用表的rowtype声明,但数据却只配置表一行的某些字段时,遍历游标时需fetch into到精确字段 CREA ...
- javascript如何解析json对javascript如何解析json对象并动态赋值到select列表象并动态赋值到select列表
原文 javascript如何解析json对象并动态赋值到select列表 JSON(JavaScriptObject Notation)一种简单的数据格式,比xml更轻巧.JSON是JavaScri ...
- C# 实体/集合差异比较,比较两个实体或集合值是否一样,将实体2的值动态赋值给实体1(名称一样的属性进行赋值)
/// <summary> /// 实体差异比较器 /// </summary> /// <param name="source">源版本实体& ...
随机推荐
- ng 手机验证码验证/发送(含倒计时)
ng 的手机号码进行验证: 1.在对应的ts文件中,先声明一个变量 private mobile: string private btnCaptchaText: string = '发送验证码' ...
- ElasticSearch 线程池类型分析之 ResizableBlockingQueue
ElasticSearch 线程池类型分析之 ResizableBlockingQueue 在上一篇文章 ElasticSearch 线程池类型分析之 ExecutorScalingQueue的末尾, ...
- Vivado_HLS 编译报错error: AP_STREAM macros are deprecated
D:/vivado2018.3/Vivado/2018.3/common/technology/autopilot\ap_stream.h:62:2: error: AP_STREAM macros ...
- .net Dapper 实践系列(5) ---事务编辑(Layui+Ajax+Dapper+MySQL)
目录 写在前面 实践步骤 写在前面 上一小节,我们总结了根据Id查询多表数据,最后返回Json对象给前台的例子.接下来,在这一小节我们要实现多表编辑的操作. 实践步骤 因为上一小节以及创建了Edit视 ...
- c#结束练习题
1.输入一个秒数,输出对应的小时.分钟.秒. 例:输入“4000“(秒),输出“1小时6分40秒”. 2.计算1-1/2+1/3-1/4+...-1/100的值. 3.写一个函数,对一个一维数组排序. ...
- kubernetes(k8s)集群安装calico
添加hosts解析 cat /etc/hosts 10.39.7.51 k8s-master-51 10.39.7.57 k8s-master-57 10.39.7.52 k8s-master-52 ...
- 自定义HTTP消息拦截
/// <summary> /// HTTP消息拦截器 /// </summary> public class RequestHandler : DelegatingHandl ...
- prometheus消耗内存问题
参考: https://stackoverflow.com/questions/56115912/why-does-prometheus-consume-so-much-memory https:// ...
- Swgger2的简单使用
编写接口文档是一个非常枯燥的工作,我们采用Swagger2这套自动化文档工具来生成文档,它可以轻松的整合到Spring Boot中,并与Spring MVC程序配合组织出强大RESTful API文档 ...
- 【Kafka】Exactly Once语义与事务
Kafka在0.11.0.0之前的版本中只支持At Least Once和At Most Once语义,尚不支持Exactly Once语义. 但是在很多要求严格的场景下,如使用Kafka处理交易数据 ...