Изображение кэшируется в Angular - PullRequest
Новая
       116

Изображение кэшируется в Angular

0 голосов
/ 04 августа 2020

Я использую angular версию 9. У меня 2 компонента. 1 для поиска марки и модели автомобиля и 2-й компонент для загрузки деталей автомобиля, выбранного из компонента 1. Я передаю ссылку на изображение для автомобиля из компонента 1 в компонент 2 и загружаю это изображение в компонент 2. Это работает нормально ..

Когда я перехожу к другой странице в моем приложении и снова go к компоненту 1 и выбираю другой автомобиль и go к компоненту 2, изображение Ранее выбранный автомобиль отображается в течение 1-2 секунд, а затем отображается мое новое изображение. Это похоже на проблему с кешированием браузера. Сначала я попытался загрузить изображение загрузчика, пока мое новое изображение не завершит загрузку, а затем показать только что загруженное изображение, но оно не работает. Я пробовал следующее. 

<img *ngIf="isLoading" [src]="loadingimage.png" />
<img [hidden]="isLoading" [src]="carModelImage" (load)="isLoading = false"/>

Я заметил, что в момент открытия компонента 2 срабатывает событие (load) в теге img и меняет значение isLoading на false даже без ожидая загрузки нового carModelImage и, таким образом, в течение некоторого времени отображается предыдущее изображение.

Код моего компонента выглядит, как показано ниже. 

@Component({
selector: 'app-request-summary',
templateUrl: './request-summary.component.html',
styleUrls: ['./request-summary.component.scss']
})

export class RequestSummaryComponent implements OnInit, OnDestroy {
    public carModelImage: string = '';
    public isLoading: boolean = true;

   constructor() {
     this.carModelImage = '';
     this.isLoading = true;
   }


   ngOnInit() {
   this.requestSummaryService.carData
    .pipe(takeUntil(this.ngUnsubscribe))
    .subscribe((data) => {
      this.carModelImage = data[0].carModelImage ? data[0].carModelImage 
      :'http://nocarimage.png';
    }
   }

   ngOnDestroy() {
     this.isLoading = true;
     this.carModelImage = '';
     this.ngUnsubscribe.next();
     this.ngUnsubscribe.complete();
   }
}

Я борюсь из-за этой проблемы, так как довольно вместе. Любая помощь будет принята с благодарностью.

Ответы [ 2 ]

1 голос
/ 04 августа 2020

Как присвоить переменную carmodelImage. CarmodelImage отвечает за отображение предыдущего изображения, если вы можете обнулить его при уничтожении, возможно, это должно помочь

Предполагая, что вы сказали, что ngondestroy вызывается

1 голос
/ 04 августа 2020

Что ж, go у меня здесь особо не на что, но я поделюсь с вами простым шаблоном.

Когда ваше изображение больше не отображается null его.

Например, где-то в вашем коде вы, вероятно, напишете это: 

carModelImage = "your-image";

Когда вы уверены, что вам это больше не нужно var, null его. 

carModelImage = null;

Разместите дополнительный код, если вам нужна помощь по c решению вашей проблемы.

...