firefox somehow caches images in angular bootstrap modal even when you change src

64
July 08, 2021, at 7:10 PM

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. but in Firefox somehow you will first see the previous image and then 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 tryed 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 dont know what to do.

You can check this out by clicking on multiple worksamples in the link below : 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>
READ ALSO
How to declare a Protocol with a field which is compatible with both a simple type and property?

How to declare a Protocol with a field which is compatible with both a simple type and property?

I want to create a Protocol, in which a field can be implemented by both a simple type and propertyFor example:

152
Converting PWA to native android webview app with notification

Converting PWA to native android webview app with notification

I have A PWA it has notification system, I want to convert it to native android webview appHow can i do it?

190
Src of an image with text + php variable

Src of an image with text + php variable

Hey i am having a hard time getting this to work I used this code

198
HI i like to spin this star i created and move it across canvas in javascript [closed]

HI i like to spin this star i created and move it across canvas in javascript [closed]

Want to improve this question? Update the question so it focuses on one problem only by editing this post

28