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

一、现象

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

二、解决

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模块中给标签添加背景图的实现方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • AngularJS中的模块详解

    在讲angularjs的模块之前,我们先介绍一下angular的一些知识点: AngularJS是纯客户端技术,完全用Javascript编写的.它使用的是网页开发的常规技术(HTML,CSS,Javascript),目的是让网页应用开发更快更容易. AngularJS简化应用开发的一个重要方法是,将一个些通用的低级开发操作包装起来提供给开发者.AngularJS会自动处理好这些低级操作.它们包括: 1.DOM操作 2.设置事件的监听 3.输入验证,因为AngularJS会处理大部分这些操作,所

  • 详细AngularJs4的图片剪裁组件的实例

    本文介绍了AngularJs4的图片剪裁组件,下面我来记录一下,有需要了解AngularJs4的图片剪裁组件的朋友可参考.希望此文章对各位有所帮助. jQuery里有一个强大的图片剪裁插件,叫cropper.js.这是大神的GitHub地址:https://github.com/fengyuanchen/cropper 首先想在全是ts文件的angular里运用jquery的js代码插件,这时候需要一个东西,他叫桥接文件.npm是一个强大的库,已经有前人在里面封装了cropper以及所有你能想到

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

    一.现象 一个全屏的"走马灯"每项需要添加背景图,在循环标签里需要动态添加行内样式 二.解决 1.首先有一个图片数组,如: export class AppComponent { array = ["url(/assets/images/img1.png)","url(/assets/images/img2.png)"]; } 2.模块中添加数据,如: <div nz-carousel-content *ngFor="let it

  • Android编程简单实现ImageView点击时背景图修改的方法

    本文实例讲述了Android编程简单实现ImageView点击时背景图修改的方法.分享给大家供大家参考,具体如下: 在使用ImageView时,当被点击时,希望背景图修改一下,这样显示被点击效果明显一些.在这里,一个很简单的方法,最起码是个很清晰的方法.在res/drawable文件夹下创建一个xml文件.比如my.xml,内容如下: <?xml version="1.0" encoding="utf-8"?> <selector xmlns:an

  • jsp中为表格添加水平滚动条的实现方法

    首先,本项目中使用的是bootstrap框架,因此有些人会说,给表格设置自适应属性就可以了 这里要申明的是 bootsrtap自适应是针对当浏览器不占满整个屏幕,而是一半的时候才会出现横向的滚动条 而当我们将浏览器最大化的时候,如果列数增多了呢?会出现什么效果 答案就是会出现挤压的效果,横向并不会出现滚动条 查看网上的教程,很多人都说将什么父div设置100%,table添加scrool属性均不可 这里,解决的方法很简单,设置<th>标签的属性即可,让其不要自动换行 $(document).r

  • Django中模型Model添加JSON类型字段的方法

    本文实例讲述了Django中模型Model添加JSON类型字段的方法.分享给大家供大家参考.具体如下: Django里面让Model用于JSON字段,添加一个JSONField自动类型如下: class JSONField(models.TextField): __metaclass__ = models.SubfieldBase description = "Json" def to_python(self, value): v = models.TextField.to_pytho

  • ASP.NET中为GridView添加删除提示框的方法

    本文实例讲述了ASP.NET中为GridView添加删除提示框的方法.分享给大家供大家参考.具体分析如下: 在GridView中我们可以直接添加一个CommandField删除列来删除某行信息.但为了避免误操作引起的误删除,在删除操作者让操作者再确认下,完后再进行删除. 首先我们给我们的GridView 添加一个模板列,如下: 以下是引用片段: <ASP:TemplateField HeaderText="Delete" ShowHeader="False"&

  • Android开发实现webview中img标签加载本地图片的方法

    Android开发实现webview中img标签加载本地图片的方法

    本文实例讲述了Android开发实现webview中img标签加载本地图片的方法.分享给大家供大家参考,具体如下: 在网上查了很多教程,感觉很麻烦,各种方法,最后实践很简单,主要是两步: WebSettings webSettings=webView.getSettings(); //允许webview对文件的操作 webSettings.setAllowUniversalAccessFromFileURLs(true); webSettings.setAllowFileAccess(true)

  • Vista中给IIS7添加PHP支持的设置方法

    Vista中给IIS7添加PHP支持的设置方法

    最后我还是用的老方法,ISAPI,选用了一个5.3以前的版本,我选的是5.2.11.php-5.2.11-Win32.zip的下载地址http://cn2.php.net/distributions/php-5.2.11-Win32.zip如果上面的地址不好始,也可以去下面这个地址去从其他镜像下载http://cn.php.net/get/php-5.2.11-Win32.zip/from/a/mirror把php-5.2.11-Win32.zip下载回来之后,把里面的文件解压到C:\php目录

  • 解决Vue2.0中使用less给元素添加背景图片出现的问题

    在使用less在Vue.js中给元素添加背景图片时 或者你会出现这样的写法 background-image: url('../img/' + @{bg_url} + '2x.png'); 或者这样 background-image: url('../img/' + @bg_url + '2x.png'); 这样 background-image: url(../img/@{bg_url}2x.png); 还有这样 background-image: url(../img/@bg_url2x.p

  • vue.js引用背景图background无效的3种解决方案

    vue.js引用背景图background无效的3种解决方案

    目录 效果图预览 1. 正确的代码,示例如下 2. 错误的代码,截图对比 vue添加背景图没反应 #vue.js项目中,出现css调用background背景图无效?如何解决? 或者调用<img>标签,也无效果? 直接上代码,自行对比查找一下: 效果图预览 1. 正确的代码,示例如下 <template> <div class="demo"> <!-- 成功引入的三种方法: --> <!-- 图1 --> <div cl

  • Android编程之书架效果背景图处理方法

    本文实例讲述了Android编程之书架效果背景图处理方法.分享给大家供大家参考,具体如下: 在android应用中,做一个小说阅读器是很多人的想法,大家一般都是把如何读取大文件,如果在滚动或是翻页时,让用户感觉不到做为重点.我也在做一个类似一功能,可是在做书架的时候,看了QQ阅读的书架,感觉很好看,就想做一个,前面一篇<android书架效果实现原理与代码>对此做了专门介绍,其完整实例代码可点击此处本站下载. 上面的例子很不错,可是有一个问题是他的背景图的宽必须是手机屏幕的宽,不会改变,这样感

随机推荐