Lightbox doesn't animate gifs and recognize tiff images

Question

I have image gallery where I upload my images, but still gifs and tiff files aren't processed properly, in my storage if I open images they are working fine, so this is issue on front. Couldn't find any solution for this problem. I'm seeking guidance on how to resolve this problem when uploading images in a Angular application. It's crucial for the functionality of my project, and I'm running out of ideas on how to make this work.

Typescript:

import {Component, EventEmitter, Input, Output} from '@angular/core';
import {Image} from '../../models/image';
import {ImageService} from '../../services/image.service';
import {AlertService} from '../../../core/services/alert.service';
import {NotificationService} from '../../../core/services/notification.service';
import {Lightbox} from 'ngx-lightbox';

@Component({
    selector: 'image-gallery',
    templateUrl: './image-gallery.component.html',
    styleUrls: ['./image-gallery.component.css']
})
export class ImageGalleryComponent {

    private readonly CONTAINER_WIDTH = 90;

    @Input()
    images: Image[] = [];

    @Input()
    disabled = true;

    @Input()
    copyImageToArticleId: number = null;

    @Output() onCopyImage = new EventEmitter<Image>();
    @Output() onRemoveImage = new EventEmitter<Image>();

    constructor(private imageService: ImageService, private alertService: AlertService, private notificationService: NotificationService,
                         private lightbox: Lightbox) {
    }

    processFile(imageInput: HTMLInputElement) {
        const fileList: FileList = imageInput.files;
        const allowedFormats: string[] = ['.jpg', '.jpeg', '.tiff', '.gif', '.png'];

        for (let index = 0; index < fileList.length; index++) {
            const file: File = fileList[index];
            const maxFileSize = 1048576 * 20;
            if (file.size > maxFileSize) {
                this.notificationService.error('request.file_upload_size_too_big', {file: file.name, maxSize: '20MB'});
                return;
            }

            const fileExtension = file.name.toLowerCase().substr(file.name.lastIndexOf('.'));
            if (!allowedFormats.includes(fileExtension)) {
                this.notificationService.error('request.invalid_format_only_specified_is_allowed', {file: file.name, allowed: allowedFormats.join(', ')});
                return;
            }

            const formData: FormData = new FormData();
            formData.append('file', file, file.name);
            this.imageService.create(formData).then(result => {
                this.images.push(result);
            }, error => {
                this.alertService.genericError();
            });
        }
    }

    calculateScrollableWidth() {
        const imageCount = this.disabled ? this.images.length : this.images.length + 1;
        return imageCount * this.CONTAINER_WIDTH;
    }

    remove(image: Image) {
        this.images = this.images.filter(item => item != image);
        this.onRemoveImage.emit(image);
    }

    getThumbnailImageUrl(image: Image) {
        return this.imageService.getThumbnailImageUrl(image.id, image.token);
    }

    open(image: Image) {
        const lighBoxImage = {
            src: this.imageService.getImageUrl(image.id, image.token),
            caption: '',
            thumb: this.imageService.getThumbnailImageUrl(image.id, image.token)
        };

        const lightBoxAlbum = [lighBoxImage];
        this.lightbox.open(lightBoxAlbum, 0);
    }

    copyToArticle(image: Image) {
        this.imageService.copyImageToArticle(image.id, this.copyImageToArticleId).then(result => {
            this.notificationService.info("articles.images.copy_success");
            this.onCopyImage.emit(image);
        }, error => {
            this.alertService.genericError();
        });
    }
}

HTML:

<div class="gallery-wrapper">
    <div class="scrollable" [style.width.px]="calculateScrollableWidth()">
        <div class="image-upload-container" *ngIf="!disabled">
            <label class="btn btn-bwm">
                <mat-icon color="primary">add_a_photo</mat-icon>
                <input #imageInput
                       type="file"
                       accept="image/*"
                       multiple
                       (change)="processFile(imageInput)">
            </label>
        </div>

        <div class="image-upload-container" *ngFor="let image of images">
            <img class="gallery-image" [src]="getThumbnailImageUrl(image)" alt="image" (click)="open(image)"/>

            <button *ngIf="!disabled" mat-icon-button [matMenuTriggerFor]="menu" type="button" color="primary" class="more">
                <mat-icon>more_vert</mat-icon>
            </button>
            <mat-menu #menu="matMenu">
                <button *ngIf="copyImageToArticleId !== null" mat-menu-item type="button" (click)="copyToArticle(image)">
                    <span>Copy to article</span>
                </button>

                <button mat-menu-item type="button" (click)="remove(image)">
                    <span>Delete</span>
                </button>
            </mat-menu>
        </div>
    </div>
</div>

CSS

.gallery-wrapper {
    overflow-x: auto;
    overflow-y: hidden;
    height: 100px;
    width: 100%;
}

.image-upload-container {
    width: 80px;
    height: 80px;
    cursor: pointer;
    position: relative;

    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;

    border: 1px solid #026db7;

    float: left;
    margin-right: 10px;
    overflow: hidden;
}

.image-upload-container label {
    display: block;
    width: 80px;
    height: 80px;
    text-align: center;
    overflow: hidden;
    cursor: pointer;
}

.image-upload-container label .mat-icon {
    position: absolute;
    top: 20px;
    left: 20px;
    font-size: 40px;
}

.image-upload-container input {
    opacity: 0;
    cursor: pointer;
}

.scrollable {
    width: 1500px;
    height: 80px;
}

.gallery-image {
    width: 80px;
    height: 80px;
}

.image-upload-container .more {
    position: absolute;
    top: -5px;
    right: 0px;
    z-index: 5;
    font-size: 18px;
    cursor: pointer;
    width: 20px !important;
}

.image-upload-container .more:hover {
    color: #ccc;
}