在Angle 7中更新时图像不会动态更改 [英] Image not change dynamically when update in angular 7

问题描述

为什么图像在更新时没有改变.我正在显示图像集.图像数据存储在数组中.更新时，所有数据都会改变，但是图像是预览旧图像.我检查了它的路径，它也是更新后的网址.我不明白为什么它没有改变.如果我将数组数据复制到const变量中，然后将该数组赋值为null，则再次将数组赋给const变量.刷新页面后，仅显示更新的图像.

Why is image not changing when updating it.I'm showing images set.Images data stored in an array.When update it,it's all the data will change,but image is preview old one.I checked it's path,it also the updated url.I can't understand why it's not changing.If I copy array data to const variable and after that array assign to null,then after again assign array to const variable.After that refresh the page,then only it's show the updated image.

我将图像数据存储在数据库中.我只想显示5张图像.如果没有上传5张图像，那么我将虚拟值存储到数组中以用于其余索引.

I'm storing images data inside my database.I want to show only 5 images.If there are no 5 images uploaded,then I stored dummy values to array for rest indexes.

这是我用于加载图像的打字稿代码.

Here is my typescript code for loading images.

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代码

Here is my html code to show images list

 <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>

单击更改"按钮时，将打开模型弹出窗口，并允许用户上传图像.从该方法中，我将获取要存储的数组索引并将其分配给变量.

When click Change button,It will open model popup and let user to upload an image.From that method,I'm getting index of array to store and assign it to a variable.

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中.

After upload image,then in my server method I'm returning uploaded image details,then I get that response data and save it inside array.In this case,I'm storing this array inside localStorage too.

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);
      }
    };
  }

我想知道的是，动态更改图像后，如何在预览中显示最新图像?现在正在显示我的旧图像.但是它的数组索引数据已经更新.当更新图像时，我从服务器中删除了旧图像.

I want to know is,when after change an image dynamically,how to show the latest image in the preview? now it's showing my old image.But it's array index data already updated.And when updating image,I remove my old image from my server.

请帮助我谢谢

推荐答案

可能是由于缓存问题所致，请像这样更改您的代码， this.baseUrl +'Upload/Photos/'+ res.photoUrl +'."+ res.fileExtension +?"+ Math.floor(Math.random()* 100)+ 1

It may be due to cache issue, Change your code like this, this.baseUrl + 'Upload/Photos/' + res.photoUrl + '.' + res.fileExtension + "?" + Math.floor(Math.random() * 100) + 1

看起来像这样

photoUrl: this.baseUrl + 'Upload/Photos/' + res.photoUrl + '.' + res.fileExtension + "?" + Math.floor(Math.random() * 100) + 1

随机号码可以根据您的要求.

Random number can be based on your requirement..

这篇关于在Angle 7中更新时图像不会动态更改的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！