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 相关文章推荐
javascript引导程序
Oct 26 Javascript
js 方法实现返回多个数据的代码
Apr 30 Javascript
jquery 操作表格实现代码(多种操作打包)
Mar 20 Javascript
js中document.write的那点事
Dec 12 Javascript
JavaScript中定义函数的三种方法
Mar 12 Javascript
详解js中==与===的区别
Jan 08 Javascript
微信小程序实现图片预加载组件
Jan 18 Javascript
Angularjs分页查询的实现
Feb 24 Javascript
MVVM 双向绑定的实现代码
Jun 21 Javascript
压缩Vue.js打包后的体积方法总结(Vue.js打包后体积过大问题)
Feb 03 Javascript
Vue js with语句原理及用法解析
Sep 03 Javascript
Vue中inheritAttrs的使用实例详解
Dec 31 Vue.js
基于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
discuz7 phpMysql操作类
2009/06/21 PHP
Nigma vs Liquid BO3 第二场2.14
2021/03/10 DOTA
jQuery 遍历json数组的实现代码
2020/09/22 Javascript
javascript中数组的sort()方法的使用介绍
2013/12/18 Javascript
jquery移除、绑定、触发元素事件使用示例详解
2014/04/10 Javascript
window.setInterval()方法的定义和用法及offsetLeft与style.left的区别
2015/11/11 Javascript
基于javascript实现全国省市二级联动下拉选择菜单
2016/01/28 Javascript
第四章之BootStrap表单与图片
2016/04/25 Javascript
jQuery使用经验小技巧(推荐)
2016/05/31 Javascript
js调用刷新界面的几种方式
2017/05/03 Javascript
JavaScript标准对象_动力节点Java学院整理
2017/06/27 Javascript
VUE v-for循环中每个item节点动态绑定不同函数的实例
2018/09/26 Javascript
Javascript通过控制类名更改样式
2019/05/24 Javascript
vue 检测用户上传图片宽高的方法
2020/02/06 Javascript
pycharm 使用心得(二)设置字体大小
2014/06/05 Python
python编码最佳实践之总结
2016/02/14 Python
Python绘制3d螺旋曲线图实例代码
2017/12/20 Python
Python实现线程状态监测简单示例
2018/03/28 Python
Python使用pickle模块储存对象操作示例
2018/08/15 Python
总结Python图形用户界面和游戏开发知识点
2019/05/22 Python
django 读取图片到页面实例
2020/03/27 Python
django的403/404/500错误自定义页面的配置方式
2020/05/21 Python
利用python中的matplotlib打印混淆矩阵实例
2020/06/16 Python
如何快速理解python的垃圾回收机制
2020/09/01 Python
python excel和yaml文件的读取封装
2021/01/12 Python
详解HTML5.2版本带来的修改
2020/05/06 HTML / CSS
美体小铺美国官网:The Body Shop美国
2017/11/10 全球购物
阿联酋最好的手机、电子产品和家用电器网上商店:Eros Digital Home
2020/08/09 全球购物
毕业生实习鉴定
2013/12/11 职场文书
校园报刊亭的创业计划书
2014/01/02 职场文书
结婚典礼证婚词
2014/01/11 职场文书
幸福家庭事迹材料
2014/02/03 职场文书
《维生素c的故事》教学反思
2014/02/18 职场文书
房屋买卖授权委托书
2014/09/27 职场文书
话题作文之关于呼唤
2019/11/29 职场文书
css3应用示例:新增的选择器
2022/03/16 HTML / CSS