Image not change dynamically when update in angular 7

问题

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.

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

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

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.

please help me thanks

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

So it looks like this,

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

Random number can be based on your requirement..

来源：https://stackoverflow.com/questions/54273787/image-not-change-dynamically-when-update-in-angular-7

标签

typescript

angular7