Unable to show existing image with url

[aminmohammadi05]

Here is my code:

pageImageList: PageImages[] = [];
  pageImagesForm: FormGroup;
  constructor(public authService: AuthService,
              private formBuilder: FormBuilder,
              public initializationService: InitializationService,
              private cdr: ChangeDetectorRef) {

               }

  ngOnInit() {
    this.pageImagesForm = this.formBuilder.group({
      mainPagePicture: ['', [FileValidatorDirective.validate]],
      productPagePicture: ['', [FileValidatorDirective.validate]],
      projectPagePicture: ['', [FileValidatorDirective.validate]],
      brandPagePicture: ['', [FileValidatorDirective.validate]],
      blogPagePicture: ['', [FileValidatorDirective.validate]]
    });
  }
  ngAfterViewInit() {
    this.pageImagesForm.get('mainPagePicture')
            .setValue(this.tabChanged(0));
            this.cdr.detectChanges();
  }

  onTabChanged(event) {
          if (event.index === 0) {
            this.pageImagesForm.get('mainPagePicture')
            .setValue(this.tabChanged(event.index + 1));
          } else if (event.index === 1) {
            this.pageImagesForm.get('productPagePicture')
            .setValue(this.tabChanged(event.index + 1));
          } else if (event.index === 2) {
            this.pageImagesForm.get('projectPagePicture')
            .setValue(this.tabChanged(event.index + 1));
          } else if (event.index === 3) {
            this.pageImagesForm.get('brandPagePicture')
            .setValue(this.tabChanged(event.index + 1));
          } else if (event.index === 4) {
            this.pageImagesForm.get('mainPagePicture')
            .setValue(this.tabChanged(event.index + 1));
          }
  }
tabChanged(index): InputFile[] {
    const retrievedImages = new Array<InputFile>();
    this.initializationService.getPageImages(index + 1).subscribe(images => {
        images.map( (x, i) => {
        this.toDataURL(`assets/pages/${x.pageId}_${x.imageId}.${x.fileExtension.split('/')[1]}`, (dataUrl) => {
          const inputFile: InputFile = { id: i + 1,
            preview: dataUrl,
            file: new File([dataUrl], `${x.pageId}_${x.imageId}`, {
            type: dataUrl.split(';')[0].split(':')[1]
          })};
          retrievedImages.push(inputFile);
          });
      });
      this.pageImageList = this.pageImageList.filter(y => y.pageId !== index + 1);
      this.pageImageList = [...images];
      });
      return retrievedImages;
  }

  toDataURL(url, callback) {
    const xhr = new XMLHttpRequest();
    xhr.onload = () => {
        const reader = new FileReader();
        reader.onloadend = () => {
            callback(reader.result);
        };
        reader.readAsDataURL(xhr.response);
    };
    xhr.open('GET', url, true);
    xhr.responseType = 'blob';
    xhr.send();
}

when I retrieve the images from the urls everything is OK but when I select one of the images to change, the other image is gone!!!!

is there any approach to show and change existing files or images?