Невозможно отобразить изображение из-за символов апострофа в angulat6

Question

Я использую угловой 6

Мои требования

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

Проблема

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

Код

HTML

<mat-card *ngIf="zoomImage" class="zoom-viewer mat-elevation-z18" [ngStyle]="{'background-image': 'url(' + zoomImage + ')'}"></mat-card>

Компонент

public getProductById(id){
    this.appService.getProductById(id).subscribe(data=>{
      this.product = data;
      this.image = data.images[0].medium.replace(/\s/g,'%20');
      this.zoomImage = data.images[0].big.replace(/\s/g,'%20').replace(/'/g,'%20');
      setTimeout(() => { 
        // .slice(1, 5)
        this.config.observer = true;
      });
    });
  }

Я не знаю, в чем заключается ошибка, поэтому, пожалуйста, помогите мне сделать это.

Answer 1

Я успешно воспроизвел вашу проблему, и мое решение таково:

Я создал изображение с именем aa, `bb`-'cc'.png

myкомпонент test ts:

  zoomImage = JSON.stringify("images/aa,`bb`-'cc'.png");

html моего теста:

<div style="width: 400px; height: 400px;" 

[ngStyle]="{'background-image': 'url(' + zoomImage + ')'}"></div>

Вы также можете сделать функцию-обертку для легкого применения stringify следующим образом:

  // Only for example function
  decodeImageName(funkyImageName) {
    return JSON.stringify(funkyImageName);
  }

ив вашем шаблоне: [ngStyle] = "{'background-image': 'url (' + decodeImageName (zoomImage) + ')'}"

---

Таким образом, вы можете попытаться проанализировать ваше странное изображениеимя с JSON.stringify вот так - JSON.stringify ("Your'Weird`Image-n'a'm'e.png")