在 angular 7 中更新时图像不会动态更改

Question

为什么更新时图像没有变化 it.I'显示图像 set.Images 数据存储在 array.When 更新它，所有数据都会改变，但图像预览旧one.I 检查了它的路径，它也更新了 url.I 无法理解为什么它不是 changing.If 我将数组数据复制到 const 变量，然后将该数组赋值给 null，然后再次赋值数组const variable.After 刷新页面，然后只显示更新后的图像。

我正在将图像数据存储在我的 database.I 中，只想显示 5 个 images.If 没有上传 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>

单击“更改”按钮时，它将打开模型弹出窗口并让用户上传一个 image.From 该方法，我正在获取要存储的数组索引并将其分配给一个变量。

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

上传图片后，然后在我的服务器方法中返回上传的图片详细信息，然后我获取响应数据并将其保存在 array.In 这种情况下，我也将此数组存储在 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);
      }
    };
  }

我想知道的是，动态更换图片后，如何在预览中显示最新的图片？现在它显示我的旧 image.But 它已经是数组索引数据 updated.And 在更新图像时，我从我的服务器中删除了我的旧图像。

请帮帮我谢谢

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

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

在 angular 7 中更新时图像不会动态更改

Image not change dynamically when update in angular 7

typescript

angular7