Блог

У меня есть изображение в моем шаблоне. Когда вы нажимаете на изображение, оно позволяет вам загрузить новое. Но это не обновляет изображение. Я попытался добавить случайные символы, и я вижу, что в начале функционального цикла и в конце есть разные символы, но изображение по-прежнему не обновляется, если вы не обновите страницу. это мой шаблон

 <img id="logoImg" [src]="agency.logoUrl" (click)="selectImage.click()" />
  <input id="inputLogoImg" type="file" accept=".png,.jpg"  #selectImage (change)="uploadLogo($event)" >
 

это мой компонент

   uploadLogo(event): void {
    const logoImg = document.getElementById('logoImg') as HTMLImageElement;
    logoImg.src = logoImg.src   '#'   Math.random();
    // this.logoUrl = logoImg.src;
    // console.log(this.logoUrl)
    console.log(logoImg.src);
    const file = event.target.files[0];
    const fileName = file.name;
    const fileExt = fileName.substring(fileName.lastIndexOf('.')   1);
    this.filePath = `${this.agencyId}.`   fileExt;
    this.afStorage.upload(this.filePath, file);
    logoImg.src = logoImg.src   '#'   Math.random();
    console.log(logoImg.src);
    // this.logoUrl = logoImg.src;
    // console.log(this.logoUrl)
    console.log(this.agencyId);
 

когда я нажимаю на изображение, я вижу два разных пути, потому что разные случайные числа, но изображение остается неизменным, если я не перезагрузлю.

Попробуйте заменить '#' Math.random(); на '?h=' Math.random(); .

Пользователь присваивает то же значение src изображения. Вы должны использовать новый путь src в agncy.logoUrl

   uploadLogo(event): void {
      const logoImg = document.getElementById('logoImg') as HTMLImageElement;
      const file = event.target.files[0];
      const fileName = file.name;
      const fileExt = fileName.substring(fileName.lastIndexOf('.')   1);
      this.filePath = `${this.agencyId}.`   fileExt;
      // logoImg.src = logoImg.src   '#'   Math.random(); old code
      logoImg.src = this.afStorage.upload(this.filePath, file); 
      // this.afStorage.upload return new file uploaded path to src 
      console.log(logoImg.src);
      console.log(this.agencyId);
  }