angular4模块中给标签添加背景图的实现方法


Posted in Javascript onSeptember 15, 2017

一、现象

一个全屏的“走马灯”每项需要添加背景图,在循环标签里需要动态添加行内样式

二、解决

1、首先有一个图片数组,如:

export class AppComponent {
 array = ["url(/assets/images/img1.png)","url(/assets/images/img2.png)"];
}

2、模块中添加数据,如:

<div nz-carousel-content *ngFor="let item of array" [ngStyle]="{'background-image': item }"></div>

三、总结

需要继续思考,如果数组中不带有url,只是单纯的图片路径,应该如何操作?

以上这篇angular4模块中给标签添加背景图的实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
33种Javascript 表格排序控件收集
Dec 03 Javascript
js中文逗号转英文实现
Feb 11 Javascript
基于JavaScript实现回到页面顶部动画代码
May 24 Javascript
关于Vue.js一些问题和思考学习笔记(1)
Dec 02 Javascript
详解JS中定时器setInterval和setTImeout的this指向问题
Jan 06 Javascript
node使用UEditor富文本编辑器的方法实例
Jul 11 Javascript
JavaScript登录验证基础教程
Nov 01 Javascript
JavaScript从原型到原型链深入理解
Jun 03 Javascript
微信小程序class封装http代码实例
Aug 24 Javascript
Vue+Vuex实现自动登录的知识点详解
Mar 04 Javascript
vue自定义组件(通过Vue.use()来使用)即install的用法说明
Aug 11 Javascript
echarts柱状图背景重叠组合而非并列的实现代码
Dec 10 Javascript
基于Vue生产环境部署详解
Sep 15 #Javascript
基于Vue单文件组件详解
Sep 15 #Javascript
json2.js 入门教程之使用方法与实例分析
Sep 14 #Javascript
php main 与 iframe 相互通讯类(js+php同域/跨域)
Sep 14 #Javascript
iframe与主框架跨域相互访问实现方法
Sep 14 #Javascript
VsCode插件整理(小结)
Sep 14 #Javascript
推荐VSCode 上特别好用的 Vue 插件之vetur
Sep 14 #Javascript
You might like
php 过滤危险html代码
2009/06/29 PHP
php生成xml时添加CDATA标签的方法
2014/10/17 PHP
php+croppic.js实现剪切上传图片功能
2018/08/14 PHP
PHP执行普通shell命令流程解析
2020/08/24 PHP
Mootools 1.2教程 滑动效果(Slide)
2009/09/15 Javascript
Extjs gridpanel 出现横向滚动条问题的解决方法
2011/07/04 Javascript
JQuery与JSon实现的无刷新分页代码
2011/09/13 Javascript
JS的encodeURI和java的URLDecoder.decode使用介绍
2014/05/08 Javascript
javascript学习笔记(一)基础知识
2014/09/30 Javascript
Nodejs学习笔记之入门篇
2015/04/16 NodeJs
JavaScript实现广告的关闭与显示效果实例
2015/07/02 Javascript
jQuery中$this和$(this)的区别介绍(一看就懂)
2015/07/06 Javascript
js实现拖拽效果(构造函数)
2015/12/14 Javascript
AngularJS 执行流程详细介绍
2016/08/18 Javascript
vue.js利用Object.defineProperty实现双向绑定
2017/03/09 Javascript
React Native模块之Permissions权限申请的实例相机
2017/09/28 Javascript
详解Vue调用手机相机和相册以及上传
2019/05/05 Javascript
node.js使用mongoose操作数据库实现购物车的增、删、改、查功能示例
2019/12/23 Javascript
vuejs中父子组件之间通信方法实例详解
2020/01/17 Javascript
jquery实现抽奖功能
2020/10/22 jQuery
[42:48]完美世界DOTA2联赛PWL S3 Magma vs INK ICE 第二场 12.11
2020/12/16 DOTA
python中self原理实例分析
2015/04/30 Python
Python编程中对文件和存储器的读写示例
2016/01/25 Python
python生成验证码图片代码分享
2016/01/28 Python
python绘图模块matplotlib示例详解
2019/07/26 Python
Python3.x+pyqtgraph实现数据可视化教程
2020/03/14 Python
cookies应对python反爬虫知识点详解
2020/11/25 Python
CSS教程:CSS3圆角属性
2009/04/02 HTML / CSS
CSS3实现水平居中、垂直居中、水平垂直居中的实例代码
2020/02/27 HTML / CSS
荷兰的时尚市场:To Be Dressed
2019/05/06 全球购物
竞聘副主任科员演讲稿
2014/01/11 职场文书
应用化学专业职业生涯规划书
2014/01/22 职场文书
五一劳动节活动记录
2014/03/23 职场文书
教师党员一句话承诺
2014/03/28 职场文书
党员转正意见怎么写
2015/06/03 职场文书
《日月潭》教学反思
2016/02/20 职场文书