Background image with https


#1

Hi guys

I created a pipe

import { Pipe } from ‘@angular/core’;
import { DomSanitizer, SafeHtml, SafeStyle, SafeScript, SafeUrl, SafeResourceUrl } from ‘@angular/platform-browser’;

@Pipe({
name: ‘safe’
})
export class SafePipe {

constructor(protected _sanitizer: DomSanitizer) {

}

public transform(value: string, type: string = 'html'): SafeHtml | SafeStyle | SafeScript | SafeUrl | SafeResourceUrl {
    console.log(value);
    switch (type) {

        case 'html': return this._sanitizer.bypassSecurityTrustHtml(value);
        case 'style': return this._sanitizer.bypassSecurityTrustStyle(value);
        case 'script': return this._sanitizer.bypassSecurityTrustScript(value);
        case 'url': return this._sanitizer.bypassSecurityTrustUrl(value);
        case 'resourceUrl': return this._sanitizer.bypassSecurityTrustResourceUrl(value);
        default: throw new Error(`Invalid safe type specified: ${type}`);
    }
}

}

I declared it at app.module.ts to create an instance

and I´ve to use here

that is inside ion-card-content

But is not working.

Here is console.log

url(https://d24kgseos9bn1o.cloudfront.net/vizzent/imagens/produtos/original/0000079212069(1).jpg)
Safe.ts:14 url(https://d24kgseos9bn1o.cloudfront.net/vizzent/imagens/produtos/original/0000000912068(1).jpg)
Safe.ts:14 url(https://d24kgseos9bn1o.cloudfront.net/vizzent/imagens/produtos/original/0000073612056(1).jpg)
Safe.ts:14 url(https://d24kgseos9bn1o.cloudfront.net/vizzent/imagens/produtos/original/0000113412059(1).jpg)
Safe.ts:14 url(https://d24kgseos9bn1o.cloudfront.net/vizzent/imagens/produtos/original/0000111012053(1).jpg)
Safe.ts:14 url(https://d24kgseos9bn1o.cloudfront.net/vizzent/imagens/produtos/original/0000114312051(1).jpg)
Safe.ts:14 url(https://d24kgseos9bn1o.cloudfront.net/vizzent/imagens/produtos/original/0000107712059(1).jpg)
Safe.ts:14 url(https://d24kgseos9bn1o.cloudfront.net/vizzent/imagens/produtos/original/0000114212054(1).jpg)
Safe.ts:14 url(https://d24kgseos9bn1o.cloudfront.net/vizzent/imagens/produtos/original/0000106012051(1).jpg)
Safe.ts:14 url(https://d24kgseos9bn1o.cloudfront.net/vizzent/imagens/produtos/original/0000269412040(1).jpg)

my package.json is:

{
“name”: “ionic-hello-world”,
“author”: “Ionic Framework”,
“homepage”: “http://ionicframework.com/”,
“private”: true,
“scripts”: {
“clean”: “ionic-app-scripts clean”,
“build”: “ionic-app-scripts build”,
“ionic:build”: “ionic-app-scripts build”,
“ionic:serve”: “ionic-app-scripts serve”
},
“dependencies”: {
"@angular/common": “2.2.1”,
"@angular/compiler": “2.2.1”,
"@angular/compiler-cli": “2.2.1”,
"@angular/core": “2.2.1”,
"@angular/forms": “2.2.1”,
"@angular/http": “2.2.1”,
"@angular/platform-browser": “2.2.1”,
"@angular/platform-browser-dynamic": “2.2.1”,
"@angular/platform-server": “2.2.1”,
"@ionic/storage": “1.1.7”,
“ionic-angular”: “2.0.0-rc.4”,
“ionic-native”: “2.2.11”,
“ionicons”: “3.0.0”,
“rxjs”: “5.0.0-beta.12”,
“zone.js”: “0.6.26”
},
“devDependencies”: {
"@ionic/app-scripts": “^1.0.0”,
“sw-toolbox”: “^3.4.0”,
“typescript”: “2.0.9”
},
“description”: “RaroCommerceV2: An Ionic project”,
“cordovaPlugins”: [
“cordova-plugin-device”,
“cordova-plugin-console”,
“cordova-plugin-whitelist”,
“cordova-plugin-splashscreen”,
“cordova-plugin-statusbar”,
“ionic-plugin-keyboard”
],
“cordovaPlatforms”: []
}