javascript - 由于 angulat6 中的撇号符号无法显示图像

Question

我正在使用 angular 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

的图像

我的测试 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")