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 相关文章推荐
IE innerHTML,outerHTML所引起的问题
Jun 04 Javascript
jquery CSS选择器笔记
Mar 29 Javascript
JS编程小常识很有用
Nov 26 Javascript
JS设置获取cookies的方法
Jan 26 Javascript
JQuery设置时间段下拉选择实例
Dec 30 Javascript
Javascript技术难点之apply,call与this之间的衔接
Dec 04 Javascript
JavaScript类型系统之正则表达式
Jan 05 Javascript
bootstrap折叠调用collapse()后data-parent不生效的快速解决办法
Feb 23 Javascript
总结JavaScript在IE9之前版本中内存泄露问题
Apr 28 Javascript
Vue.js 中取得后台原生HTML字符串 原样显示问题的解决方法
Jun 10 Javascript
Vue2实时监听表单变化的示例讲解
Aug 30 Javascript
JQuery实现ajax请求的示例和注意事项
Dec 10 jQuery
基于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数字格式化
2006/12/06 PHP
php压缩多个CSS为一个css的代码并缓存
2011/04/21 PHP
php的dl函数用法实例
2014/11/06 PHP
优化WordPress的Google字体以加速国内服务器上的运行
2015/11/24 PHP
php发送http请求的常用方法分析
2016/11/08 PHP
PHPCrawl爬虫库实现抓取酷狗歌单的方法示例
2017/12/21 PHP
JQuery的ajax获取数据后的处理总结(html,xml,json)
2010/07/14 Javascript
jQuery中replaceWith()方法用法实例
2014/12/25 Javascript
jQuery插件slicebox实现3D动画图片轮播切换特效
2015/04/12 Javascript
JavaScript中的事件委托及好处
2016/07/12 Javascript
Boostrap实现的登录界面实例代码
2016/10/09 Javascript
Javascript 实现简单计算器实例代码
2016/10/23 Javascript
Bootstrap基本插件学习笔记之折叠(22)
2016/12/08 Javascript
JavaScript防止全局变量污染的方法总结
2018/08/02 Javascript
详解JavaScript 的变量
2019/03/08 Javascript
webpack4实现不同的导出类型
2019/04/09 Javascript
vue列表单项展开收缩功能之this.$refs的详解
2019/05/05 Javascript
vue项目中使用scss的方法步骤
2019/05/16 Javascript
详解关于表格合并span-method方法的补充(表格数据由后台动态返回)
2019/05/21 Javascript
js实现轮播图效果 z-index实现轮播图
2020/01/17 Javascript
js表达式与运算符简单操作示例
2020/02/15 Javascript
从零学python系列之数据处理编程实例(一)
2014/05/22 Python
Python3实现从指定路径查找文件的方法
2015/05/22 Python
python实现红包裂变算法
2016/02/16 Python
Python中%r和%s的详解及区别
2017/03/16 Python
python如何获取apk的packagename和activity
2020/01/10 Python
python3连接mysql获取ansible动态inventory脚本
2020/01/19 Python
Python手动或自动协程操作方法解析
2020/06/22 Python
IGK Hair官网:喷雾、洗发水、护发素等
2020/11/03 全球购物
函授大专自我鉴定
2013/11/01 职场文书
军训心得体会
2013/12/31 职场文书
卫生安全检查制度
2014/02/04 职场文书
我爱我的祖国演讲稿
2014/05/04 职场文书
党员批评与自我批评发言稿
2014/10/14 职场文书
置业顾问岗位职责
2015/02/09 职场文书
js不常见操作运算符总结
2021/11/20 Javascript