Firefox somehow caches images in Angular Bootstrap modal even when you change src

Firefox Development
#1

I am using Bootstrap modal in my Angular project. In my search worksample page, I have one single modal component used for showing full worksample detail and each time a worksample is being opened I change the input of that modal component.

In Chrome everything works fine and when you open different worksample modals each time the new image starts to load. However, in Firefox somehow you will first see the previous image and then the new image starts to load. I am using ngif on the image tag so it should be reinitialized and previous image should be gone for good.

I tried setting flags to make img and component that contains the img tag reinitialize while modal is closed so next time only new images load but this issue still stands on Firefox and I don’t know what to do.

You can check this out by clicking on multiple worksamples in the link: worksampleSearch.

showContent is a boolean which is false while modal is closed and is true when modal opens. app-work-sample-content is the component that contains the image and stuff which are showed in modal.

<div dir="rtl" class="modal fade overflow-auto" id="workSampleModal" tabindex="-1" role="dialog" aria-labelledby="workSampleModalTitle" aria-hidden="true">
    <span id="modalTop" class="h-0 overflow-hidden"></span>
    <div class="modal-dialog" role="document">
        <div class="modal-content br-9 p-30">
            <button #dismiss type="button" class="close fs-30 top-5 right-5 position-absolute color-primary opacity-1" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
            <app-work-sample-content *ngIf="showContent" (removedWorkSample)="removeWorkSample()" (closeModal)="closeModal()" [workSampleModel]="workSampleModel"></app-work-sample-content>
        </div>
    </div>
    <button #closeBtn type="button" class="d-none" data-dismiss="modal">Close</button>
</div>