1

I have an image as below:

  <img [attr.src]="sanitizer.bypassSecurityTrustUrl(imgSource)">

And the imgSource is always same after retrieved once. However, it keeps requesting the image again and again from the network (see this image).

However, if I don't use the sanitizer, the image is retrieved only once as it is expected. Is it a bug of the sanitizer or is something else wrong?

Bünyamin Sarıgül
  • 3,031
  • 4
  • 30
  • 55
  • the method is causing angular to keep running change detection probably. I would change to a property of the component instead: `[attr.src]="someProp"` – Michael Doye Jun 03 '19 at 12:15
  • Not sure about my answer, but: You add the sanitizer in the constructor of the module / component, not in the template. You inject the sanitizer, sanitize the image, and then you can use the url / resource freely in the HTML as you would normally. But adding the request to the HTML makes angular run this particular code each time the life cycle runs (afaik), and this is why its happening a million times. – Francisco Santorelli Jun 03 '19 at 12:15

1 Answers1

0

Url keeps being requested because you are sanitizing url in html so when ever change detection occur it will sanitizing the url. If you change the ChangeDetectionStrategy then it will call only once.

here is the example 

import { Component, Input, ChangeDetectionStrategy } from '@angular/core';

@Component({
  selector: 'mycomponent',
  templateUrl: './mycomponent.html',
  changeDetection: ChangeDetectionStrategy.OnPush
})
Yash Rami
  • 2,276
  • 1
  • 10
  • 16