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 相关文章推荐
JQuery each()函数如何优化循环DOM结构的性能
Dec 10 Javascript
函数window.open实现关闭所有的子窗口
Aug 03 Javascript
Jquery ajax加载等待执行结束再继续执行下面代码操作
Nov 24 Javascript
JQuery学习总结【二】
Dec 01 Javascript
jfinal与bootstrap的登出实战详解
Nov 27 Javascript
详解koa2学习中使用 async 、await、promise解决异步的问题
Nov 13 Javascript
vue自定义指令的创建和使用方法实例分析
Dec 04 Javascript
vue 实现websocket发送消息并实时接收消息
Dec 09 Javascript
jquery更改元素属性attr()方法操作示例
May 22 jQuery
vue+iview实现文件上传
Nov 17 Vue.js
五句话帮你轻松搞定js原型链
Dec 09 Javascript
json.stringify()与json.parse()的区别以及用处
Jan 25 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 实现判断用户是否手机访问
2015/01/21 PHP
php数组键名技巧小结
2015/02/17 PHP
PHP封装函数实现生成随机的字符串验证码
2017/01/24 PHP
ThinkPHP模板标签eq if 中区分0,null,false的方法
2017/03/24 PHP
Ajax中的JSON格式与php传输过程全面解析
2017/11/14 PHP
使用PHP+Redis实现延迟任务,实现自动取消订单功能
2019/11/21 PHP
广告代码静态化js通用函数
2007/05/09 Javascript
基于jquery1.4.2的仿flash超炫焦点图播放效果
2010/04/20 Javascript
jQuery 中使用JSON的实现代码
2011/12/01 Javascript
Jquery图片滚动与幻灯片的实例代码
2013/04/08 Javascript
使用JavaScript 实现对象 匀速/变速运动的方法
2013/05/08 Javascript
js复制到剪切板的实例方法
2013/06/28 Javascript
JS 操作Array数组的方法及属性实例解析
2014/01/08 Javascript
js实现延迟加载的方法
2015/06/24 Javascript
JavaScript中实现无缝滚动、分享到侧边栏实例代码
2016/04/06 Javascript
基于jquery插件实现拖拽删除图片功能
2020/08/27 Javascript
AngularJS入门教程之Scope(作用域)
2016/07/27 Javascript
windows下vue-cli及webpack搭建安装环境
2017/04/25 Javascript
Node.js学习教程之HTTP/2服务器推送【译】
2017/10/31 Javascript
React 高阶组件入门介绍
2018/01/11 Javascript
JS设计模式之命令模式概念与用法分析
2018/02/06 Javascript
微信小程序通过保存图片分享到朋友圈功能
2018/05/24 Javascript
浅谈Javascript常用正则表达式应用
2019/03/08 Javascript
Vue中避免滥用this去读取data中数据
2021/03/02 Vue.js
python进程管理工具supervisor使用实例
2014/09/17 Python
全面了解Python环境配置及项目建立
2016/06/30 Python
python web.py开发httpserver解决跨域问题实例解析
2018/02/12 Python
python中字符串的操作方法大全
2018/06/03 Python
解决Atom安装Hydrogen无法运行python3的问题
2019/08/28 Python
Python环境搭建过程从安装到Hello World
2021/02/05 Python
怎样比较两个类型为String的字符串
2016/08/17 面试题
咖啡店自主创业商业计划书
2014/01/22 职场文书
环保建议书400字
2014/05/14 职场文书
中学生检讨书1000字
2014/10/28 职场文书
出生证明格式
2015/06/15 职场文书
OpenCV-Python实现人脸美白算法的实例
2021/06/11 Python