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

的图片

我的测试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（'+ encodeImageName（zoomImage）+'）'}”

因此，基本上，您可以尝试使用JSON.stringify这样解析您的怪异图像名称- JSON.stringify（“ Your'Weird`Image-n'a'm'e.png”）

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

1 个答案: