在角度 7 中更新时图像不会动态变化

Question

为什么更新时图像没有改变。我正在显示图像集。图像数据存储在一个数组中。更新它时，所有数据都会改变，但图像是预览旧的。我检查了它的路径，它也更新了 url。我不明白为什么它没有改变。如果我将数组数据复制到 const 变量并在该数组分配给 null 之后，然后再次将数组分配给 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);
      }
    };
  }

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

请帮帮我 谢谢

Answer 1

可能是缓存问题，改成这样，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

随机数可以根据您的要求..