can't view expanded images

[Nixon-Joseph]

Angular is sanitizing the active image view background-image style. Getting this any time I attempt to open the image for full size view:

"WARNING: sanitizing unsafe style value url(assets/img/gallery/....."

This is appearing for me on a fresh project, literally built just to test the gallery. Images go through graphicsmagick fine, and I'm getting all the thumbnails without issue (probably because they're img tags, and the src isn't getting set as a background style).

Otherwise the gallery looks and works great. Good work sir!

Was wondering if maybe you could just include a pipe into your template section where you inject the relative urls into the styles. I found this method, that seems like it should work

`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 {
	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}`);
	}
}

}`

Can simply be called by 'whatever | safe: "style"'

For non-plagiarism's sake - https://forum.ionicframework.com/t/inserting-html-via-angular-2-use-of-domsanitizationservice-bypasssecuritytrusthtml/62562/5

I wish you luck sir!

angular - ^4.0.0 node - 7.9.0

[adamnolte]

Have you been able to get this to work? I am having same issue where expanded photos cannot be viewed on a fresh project. Thumbnails are fine.

[Nixon-Joseph]

I haven't worked on it since that first day. I know it can be fixed by telling Angular it's safe, but I wasn't able (in the short time I tried) to find where to put the filter. I had tried a few places, but it always just broke stuff. If I find some time this weekend, I'll give it another go.

[adamnolte]

Took a quick stab at it this afternoon. Was able to get everything working by taking your pipe and wrapping the logic of selecting an image into a function.

[style.background-image]="getImage(img, j) | safe:'style'"

public getImage(img,index){ return img['viewerImageLoaded'] ? "url('"+img[this.categorySelected]['path']+"')" : Math.abs(this.currentIdx-index) <=1 ? "url('+img['preview_xxs']['path']+')" : "" }

[Nixon-Joseph]

Lol, I'm an idiot, I was trying to modify the built code to get what I needed done. Just cloned the project and am working on building my own version with your suggested edits. Thanks!

[Nixon-Joseph]

Hey, I can't get my stuff to compile/import it into the project. Do you have a tutorial or maybe how you did it so that you could actually use it? thanks.

[rviveiros]

I can't view the expanded image, and I got no warnings about sanitizing unsafe style. Any new about a definitive solution?

[adamnolte]

Ya I did not have any warnings about sanitizing the url but adding the code above fixed it for me. I will try to put together a pull request with the fix this weekend if I have time.

In the meantime you can try editing viewer.component.html and viewer.component.ts to include the code above. You can add the pipe by creating a safe.pipe.ts with the following `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): SafeHtml | SafeStyle | SafeScript | SafeUrl | SafeResourceUrl {
    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}`);
    }
}

}`

Then import the pipe in angular2imagegallery.module and put in the declarations.

[Nixon-Joseph]

Thanks man, I'm trying that tonight.

[gatorpazz]

Hey! I see this is an older issue but I'm experiencing it with an Angular 6 project I'm working on. I'm a bit noobish with Angular so I'm not sure where to put these fixes. Can someone break it down for me? Thank you!

[Izzatbek]

Same for me, not working on a fresh Angular 6 project

[adamnolte]

Been a while since I worked on this, but you can see how I implemented the image viewer here. I cloned the repo and brought it into my project with some modifications. - https://github.com/ajnolte12/beta-sig-website/tree/master/src/app/gallery/image-gallery