需要创建一个pipe

代码如下

import { Pipe, PipeTransform } from '@angular/core';
import {DomSanitizer} from '@angular/platform-browser';
@Pipe({
name: 'trustUrl'
})
export class TrustUrlPipe implements PipeTransform {
constructor(private sanitizer: DomSanitizer) { }
transform(url: any, args?: any): any {
// 允许通过不安全的 url
return this.sanitizer.bypassSecurityTrustResourceUrl(url);
} }

  

2. 在url中使用此管道

<img src="(baseImgSrc) | trustUrl">

  baseImgSrc  是图片的路径

angular2 图片赋值的时候前面自动加 unsafe:xxx 导致图片信息不显示问题的更多相关文章

  1. exml自动加载图片

    常规H5和微信小游戏同样有效 一.exml自动加载图片 有两张图片 图片未放入defatult.res.json的资源组里,未预先加载包含2张图片的资源组,仅仅在default.res.json里有图 ...

  2. BPM配置故事之案例3-参与者与数据自动加载

    这才过了两天,阿海又来了. 阿海:公司决定改进管理方式,以后物资申请的申请人和申请部门要写具体使用人的名字和部门了. 小明:不是要让我改回去吧? 阿海:那太麻烦了,你能不能把申请人改成选择,选好人自动 ...

  3. 速战速决 (5) - PHP: 动态地创建属性和方法, 对象的复制, 对象的比较, 加载指定的文件, 自动加载类文件, 命名空间

    [源码下载] 速战速决 (5) - PHP: 动态地创建属性和方法, 对象的复制, 对象的比较, 加载指定的文件, 自动加载类文件, 命名空间 作者:webabcd 介绍速战速决 之 PHP 动态地创 ...

  4. PHP中类自动加载的方式

    最近在学习composer,发现从接触PHP到现在已经遇到了三种关于PHP中类的自动加载方式,这其中包括PHP自带的类的自动加载方式.PHP的第三方的依赖管理工具composer的加载方式以及PHP的 ...

  5. [JS前端开发] js/jquery控制页面动态加载数据 滑动滚动条自动加载事件

    页面滚动动态加载数据,页面下拉自动加载内容 相信很多人都见过瀑布流图片布局,那些图片是动态加载出来的,效果很好,对服务器的压力相对来说也小了很多 有手机的相信都见过这样的效果:进入qq空间,向下拉动空 ...

  6. Yii2之类自动加载

    在yii中,程序中需要使用到的类无需事先加载其类文件,在使用的时候才自动定位类文件位置并加载之,这么高效的运行方式得益于yii的类自动加载机制. Yii的类自动加载实际上使用的是PHP的类自动加载,所 ...

  7. DDGScreenShot--iOS 图片裁剪,切圆角,加边框,你还用cornerRadius,还有更高级的用法

    写在前面 我们肯定做过这样的需求,给一个图片切圆角, 当然我们大多采用简单粗暴的方法 myIcon.layer.cornerRadius = 16.5 myIcon.layer.masksToBoun ...

  8. composer 实现自动加载原理

    简介 一般在框架中都会用到composer工具,用它来管理依赖.其中composer有类的自动加载机制,可以加载composer下载的库中的所有的类文件.那么composer的自动加载机制是怎么实现的 ...

  9. Python3从零开始爬取今日头条的新闻【三、滚动到底自动加载】

    Python3从零开始爬取今日头条的新闻[一.开发环境搭建] Python3从零开始爬取今日头条的新闻[二.首页热点新闻抓取] Python3从零开始爬取今日头条的新闻[三.滚动到底自动加载] Pyt ...

随机推荐

  1. HDU1166-ZKW树

    单点修改,区间求和 // // Created by helica on 2018/3/18. // //zkw #include <cstdio> #include <cstrin ...

  2. python测试工程师高端基础面试题整理

    面试总括篇 技术技能 开发语言:python 数据库:mysql 操作系统;linux 网络协议基础 测试技能:自动化(UIselenium+接口)+性能 业务知识 测试工程师执业规划 初级--> ...

  3. 「雅礼集训 2017 Day5」珠宝

    题目描述 Miranda 准备去市里最有名的珠宝展览会,展览会有可以购买珠宝,但可惜的是只能现金支付,Miranda 十分纠结究竟要带多少的现金,假如现金带多了,就会比较危险,假如带少了,看到想买的右 ...

  4. vue-微信支付or支付宝支付片段

      <ulclass="way_list"> <li v-if="!isWeixinBrowser" class="group al ...

  5. Android studio Error: Modules no specified解决和真机调试

    如何配置SDK百度一大堆: 前言:Android Studio很完善,如果SDK配置好,理论上就是 创建项目->创建个APP(名字自己随便起)->打开手机开发者模式运行即可:如果出了问题, ...

  6. (Python)PO设计模式

    无规矩不成方圆.编写代码也是,如果没有大概的框架,管理代码将会是一件很头疼的事. 先看看笔者以前写的python脚本: 如果只有一个用例,这样看着好像挺整洁的.但是当用例越来越多后,如果元素定位发生了 ...

  7. Jmeter 逻辑控制器总结

    本文主要总结Jmeter的逻辑控制器: 逻辑控制器下一共16个控制器: 1.foreach controller循环控制器 定义变量数组,按数组遍历循环   2.simple controller 简 ...

  8. sass补充(2019-3-9)

    @each 输出 格式: @each $var in value,value1,value2{ } eg: @each $var1 in 100px,200px,300px{ .box{ width: ...

  9. Flink 核心技术浅析(整理版)

    1. Flink简介 Apache Flink是一个面向分布式数据流处理和批量数据处理的开源计算平台,它能够基于同一个Flink流执行引擎(streaming dataflow engine),提供支 ...

  10. 安卓ADB学习笔记

    ADB(Android Debug Bridge)可以远程调试安卓设备,包括模拟器,可以进入终端模式(安卓本身相当于一个linux) 1.配置adb环境变量 以夜神模拟器为例,将模拟器安装路径里的bi ...