由于 angulat6 中的撇号符号而无法显示图像答案

【问题标题】：Not able to display image due to apostrophe symbols in angulat6由于 angulat6 中的撇号符号而无法显示图像
【发布时间】：2018-10-15 07:26:59
【问题描述】：

我正在使用角度 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;
      });
    });
  }

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

【问题讨论】：

也许从你的文件名中删除引号？
this.image 和 this.zoomImage 应该是 URL 吗？那你为什么要以这种错误的方式操纵它们中的字符呢？ %20 是普通空格字符的 URL 转义 - 不是每个空格字符，也不是 '。也许您应该尝试正确的 URL 编码？ encodeURIComponent
我试过你的例子@op - zoomImage = "images/aa,bb-cc.png";它工作得很好。举个例子，zoomImage 是什么样子的。

标签： javascript angular angular5 angular6 angular-material-6

【解决方案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>

你也可以像这样创建一个包装函数来轻松应用字符串化：

  // 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")

【讨论】：