Javascript 由于angulat6中的撇号符号，无法显示图像

我用的是角度6

我的要求

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

在“我的详细信息”产品页面中，如果用户将鼠标悬停在必须缩放的图像上，则会有一个图像部分

问题

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

某些产品图像名称包含特殊字符，如“，”，“-”。如果此符号包含，则表示产品未显示

代码

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

---

我不知道这是什么错误，所以请帮我做这件事。

我成功地重现了您的问题，我的解决方案是：

我创建了一个名为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>

在您的模板中：[ngStyle]=“{'background-image'：'url（'+decodeImageName（zoomImage）+''）”

---

---

所以基本上你可以试着用JSON.stringify解析你奇怪的图像名，就像这样-JSON.stringify（“你的'weird'image-n'a'm'e.png”）

也许可以删除文件名中的引号？那么

this.image

和

this.zoomImage

应该是URL吗？那你为什么要用这种错误的方式操纵其中的角色呢

%20

是普通空格字符的URL转义符-不是每个空格字符，也不是

'

的URL转义符。也许你应该尝试正确的URL编码

encodeURIComponent

我试过你的例子@op-zoomImage=“images/aa，bb cc.png”；它工作得很好。给我们举一个ZoomImages是什么样子的例子。