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 相关文章推荐
浅谈Sizzle的“编译原理”
Apr 14 Javascript
Javascript动态创建表格及删除行列的方法
May 15 Javascript
深入理解JavaScript的React框架的原理
Jul 02 Javascript
学习javascript文件加载优化
Feb 19 Javascript
JavaScript核心语法总结(推荐)
Jun 02 Javascript
浅谈JavaScript中面向对象的的深拷贝和浅拷贝
Aug 01 Javascript
js动态生成form 并用ajax方式提交的实现方法
Sep 09 Javascript
AngularJS自定义服务与fliter的混合使用
Nov 24 Javascript
jQuery基于事件控制实现点击显示内容下拉效果
Mar 07 Javascript
JavaScript实现的原生态Tab标签页功能【兼容IE6】
Sep 18 Javascript
Vue使用Canvas绘制图片、矩形、线条、文字,下载图片
Apr 26 Javascript
JS创建或填充任意长度数组的小技巧汇总
Oct 24 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
提问的智慧(2)
2006/10/09 PHP
php查询ip所在地的方法
2014/12/05 PHP
PHP中模拟链表和链表的基本操作示例
2016/02/27 PHP
通过修改Laravel Auth使用salt和password进行认证用户详解
2017/08/17 PHP
PHPExcel 修改已存在Excel的方法
2018/05/03 PHP
JavaScript 乱码问题
2009/08/06 Javascript
nodejs实用示例 缩址还原
2010/12/28 NodeJs
js 实现css风格选择器(压缩后2KB)
2012/01/12 Javascript
jquery简单的拖动效果实现原理及示例
2013/07/26 Javascript
JavaScript中创建类/对象的几种方法总结
2013/11/29 Javascript
JavaScript将一个数组插入到另一个数组的方法
2015/03/19 Javascript
JS实现的仿东京商城菜单、仿Win右键菜单及仿淘宝TAB特效合集
2015/09/28 Javascript
JQuery实现Ajax加载图片的方法
2015/12/24 Javascript
Bootstrap模态对话框的简单使用
2016/04/29 Javascript
AngularJs expression详解及简单示例
2016/09/01 Javascript
Html中 IFrame的用法及注意点
2016/12/22 Javascript
详解vue-cli 脚手架项目-package.json
2017/07/04 Javascript
vue动态路由实现多级嵌套面包屑的思路与方法
2017/08/16 Javascript
自定义类似于jQuery UI Selectable 的Vue指令v-selectable
2017/08/23 jQuery
JS实现数组简单去重及数组根据对象中的元素去重操作示例
2018/01/05 Javascript
30分钟精通React今年最劲爆的新特性——React Hooks
2019/03/11 Javascript
基于vue.js仿淘宝收货地址并设置默认地址的案例分析
2020/08/20 Javascript
[36:33]Ti4 循环赛第四日 附加赛NEWBEE vs Mouz
2014/07/13 DOTA
[19:15]DK战队纪录片
2014/09/02 DOTA
Python中数组,列表:冒号的灵活用法介绍(np数组,列表倒序)
2018/04/18 Python
Python引入多个模块及包的概念过程解析
2020/09/21 Python
详解python使用金山词霸的翻译功能(调试工具断点的使用)
2021/01/07 Python
CSS伪类与CSS伪元素的区别及由来具体说明
2012/12/07 HTML / CSS
优秀大学生推荐信范文
2013/11/28 职场文书
求职信的七个关键技巧
2014/02/05 职场文书
推广普通话标语
2014/06/27 职场文书
卫校毕业生自我鉴定
2014/09/28 职场文书
先进个人申报材料
2014/12/30 职场文书
毕业生求职自荐信(2016最新版)
2016/01/28 职场文书
教你怎么用Python实现GIF动图的提取及合成
2021/06/15 Python
asyncio异步编程之Task对象详解
2022/03/13 Python