Html 如何在angular 6中设置背景图像？

这里我想设置placehoder图像，为此我使用commonurl路径（this.commonUrlObj.commonurl）而不是（）那么如何在angular 6中使用commonurl设置背景图像中的图像呢

category.component.html

<img [src]="url" style="height: 400px;width: 400px" [ngStyle]="{'background-image': getUrl()}">

通用类

export class CommonClass {
  constructor(public commonUrl : string = 'http://localhost:3000'){};
}

---

也许我不明白你的问题，但这就是你想做的吗

getUrl(){
  return `url('${this.commonUrlObj.commonUrl}/placeholder.jpg')`;
}

---

也许我不明白你的问题，但这就是你想做的吗

getUrl(){
  return `url('${this.commonUrlObj.commonUrl}/placeholder.jpg')`;
}

---

图像不能有背景图像。您可以做的是包装一个

div

，并给它一个背景：

getUrl(){
  return "url('"+this.commonUrlObj.commonUrl+"'/placeholder.jpg')";
}

<div  [ngStyle]="{'background-image': getUrl()}>
  <img [src]="url" style="height: 400px;width: 400px">
</div>

getUrl（）{
返回“url（'”+this.commonUrlObj.commonUrl+“/placeholder.jpg'）”；
}
图像不能有背景图像。您可以做的是包装一个
div
，并给它一个背景：

getUrl(){
  return "url('"+this.commonUrlObj.commonUrl+"'/placeholder.jpg')";
}

<div  [ngStyle]="{'background-image': getUrl()}>
  <img [src]="url" style="height: 400px;width: 400px">
</div>

getUrl（）{
返回“url（'”+this.commonUrlObj.commonUrl+“/placeholder.jpg'）”；
}
根据中的文档，您可以给ngStyle一个ObjExp。像这样

TS
// Not in the question but don't use a constructor to define vars
private commonUrl: string = 'localhost:3000'; // Could have this as an env variable

getBackground() {
   return {'background-image': `url(${this.commonUrl}/placeholder.png)`};
}

HTML
<div [ngStyle]="getBackground()"></div>

TS
//不在问题中，但不要使用构造函数来定义变量
私有commonUrl:string='localhost:3000'；//可以将其作为环境变量
getBackground（）{
返回{'background-image'：`url（${this.commonUrl}/placeholder.png）`}；
}
HTML
根据中的文档，您可以给ngStyle一个ObjExp。像这样

TS
// Not in the question but don't use a constructor to define vars
private commonUrl: string = 'localhost:3000'; // Could have this as an env variable

getBackground() {
   return {'background-image': `url(${this.commonUrl}/placeholder.png)`};
}

HTML
<div [ngStyle]="getBackground()"></div>

TS
//不在问题中，但不要使用构造函数来定义变量
私有commonUrl:string='localhost:3000'；//可以将其作为环境变量
getBackground（）{
返回{'background-image'：`url（${this.commonUrl}/placeholder.png）`}；
}
HTML
这部分${this.commonUrlObj.commonUrl}将不会呈现，它将显示为使用`相反，对于整个字符串我使用`但是它给出了这种类型的错误GET（404（未找到））哦，是的，我错过了``引号->编辑仍然不起作用？这部分${this.commonUrlObj.commonUrl}将不会呈现，它将显示为use`而不是，整个字符串我对整个字符串使用'，但它给出了这种类型的错误GET（404（未找到））哦，是的，我错过了``quotes->Edited仍然不起作用？什么给出了“getUrl（）”？什么给出了“getUrl（）”？