Почему изображение не меняется при обновлении. Я показываю изображения, установленные. Изображения данных, хранящихся в массиве. При обновлении все данные изменятся, но изображение является старым для предварительного просмотра. Я проверил его путь, оно также обновленный URL-адрес. Я не могу понять, почему он не меняется. Если я копирую данные массива в переменную const и после того, как этот массив присваивается нулевой переменной, затем снова присваиваю массив переменной const. После этого обновляется страница, затем только ее показ. обновленное изображение.
Я храню данные изображений в своей базе данных. Я хочу показать только 5 изображений. Если нет загруженных 5 изображений, то я сохранил фиктивные значения в массиве для индексов отдыха.
Вот мой машинописный код для загрузки изображений.
getAllAdds() {
this.storedAds = JSON.parse(localStorage.getItem('ads'));
this.advertisementsList = this.storedAds;
const len = this.advertisementsList.length === 5 ? 5 : (5 - this.advertisementsList.length);
for (let i = (5 - len); i < 5; i++) {
const img = {
link: '',
modifiedBy: '',
side: '',
id: '',
photoUrl: this.baseUrl + 'Upload/Photos/defaultAdd.jpg',
dateAdded: '',
dateModified: '',
isActive: false,
fileExtension: 'jpg',
position: i + 1
};
this.advertisementsList.push(img);
}
Вот мой HTML-код для отображения списка изображений
<div class="col-md-3" *ngFor="let photo of advertisementsList; let i = index">
<div class="card mb-2">
<div class="card-body">
<h5 class="card-title text-center"> {{photo.position}}</h5>
<div class="add-img">
<img src="{{photo.photoUrl}}" class="img-thumbnail p-1" alt="">
</div>
<div class="text-center mt-1">
<button type="button" class="btn btn-sm mr-1" (click)="openModal(template,i)">Change</button>
<button type="button" class="btn btn-sm btn-danger">
<i class="fa fa-trash-o"></i>
</button>
</div>
</div>
</div>
</div>
Когда нажмете кнопку Изменить, откроется всплывающее окно модели и пользователь сможет загрузить изображение. Из этого метода я получаю индекс массива для хранения и присваиваю его переменной.
openModal(template: TemplateRef<any>, index) {
if (this.advertisementsList && this.advertisementsList.length > 0) {
this.uploadingImageIndex = index;
const len = this.advertisementsList.length;
if (this.advertisementsList[index].id !== '') {
this.positionId = this.advertisementsList[index].id;
} else {
this.positionId = '0';
}
} else {
this.positionId = '0';
}
this.modalRef = this.modalService.show(template);
}
После загрузки изображения, затем в моем методе сервера я возвращаю детали загруженного изображения, затем я получаю эти данные ответа и сохраняю их в массиве. В этом случае я также сохраняю этот массив внутри localStorage.
this.uploader.onSuccessItem = (item, response, status, headers) => {
if (response) {
const res: GetAdvertisement = JSON.parse(response);
this.alertify.success('Photos uploaded successfully');
this.modalRef.hide();
const index = this.uploadingImageIndex;
const photo = {
id: res.id,
link: res.link,
modifiedBy: res.modifiedBy,
side: res.side,
photoUrl: this.baseUrl + 'Upload/Photos/' + res.photoUrl + '.' + res.fileExtension,
dateAdded: res.dateAdded,
dateModified: res.dateModified,
isActive: res.isActive,
fileExtension: res.fileExtension,
position: index + 1
};
this.advertisementsList.splice(this.uploadingImageIndex, 1);
this.advertisementsList.push(photo);
if (index < this.storedAds.length) {
// stored app should update
this.storedAds[index] = photo;
} else {
// add new record to storedads
this.storedAds.push(photo);
}
localStorage.setItem('ads', JSON.stringify(this.storedAds));
const plist = this.advertisementsList;
this.advertisementsList = null;
this._compiler.clearCache();
this.advertisementsList = plist;
this.router.onSameUrlNavigation = 'reload';
this.authService.advertisementsList = this.advertisementsList;
localStorage.setItem('ads', JSON.stringify(this.advertisementsList));
// window.location.reload();
console.log(this.advertisementsList);
}
};
}
Я хочу знать, когда после динамического изменения изображения как отображать последнее изображение в предварительном просмотре? теперь он показывает мое старое изображение. Но данные индекса массива уже обновлены. И при обновлении изображения я удаляю старое изображение со своего сервера.
пожалуйста, помогите мне
спасибо