olya_097

<div *ngFor="let file of files">
  <img [src]="fileName" />
</div>

<div *ngFor="let file of files">
  <img [src]="file.name" />
</div>

handleFile(event: any) {
    const file = event.target.files[0];

    if (file) {
      const reader = new FileReader();

      reader.onload = (e) => {
        file.imageSrc = reader.result
      }

      reader.readAsDataURL(file);

      this.files.push(file);
      this.fileName = file.name;
    }
}

<div *ngFor="let file of files">
  <img [src]="file.imageSrc" />
</div>

@keyframes custom-fade-in {
    0% {
        stroke-dasharray: 0 300;
        fill: transparent;
        animation-timing-function: ease-in;
    }
    50% {
        stroke-dasharray: 150 150;
        fill: transparent;
        animation-timing-function: ease-out;
    }
    100% {
        stroke-dasharray: 300 0;
        fill: #000;
    }
}

path {
    stroke: #000;
    fill: none;
    stroke-dasharray: 0 300;
    animation: custom-fade-in 2s ease-in-out infinite;
    animation-fill-mode: forwards;
}

$('.block__holder').on('click', '.block__image', function() {
  const $this = $(this);
  $this.addClass('block__image--active').siblings().removeClass('block__image--active');
  block_slider.trigger('to.owl.carousel', $this.index());
});

Влияет ли на загрузку страницы количество слайдеров?

var currentHeight = $('.account').outerHeight(true);