Angular中的ngStyle背景图像答案

【问题标题】：ngStyle backgroud image in AngularAngular中的ngStyle背景图像
【发布时间】：2019-05-21 08:28:26
【问题描述】：

我在我的 div 元素中使用 ngStyle 标签来设置图像，但是图像不工作，

我尝试将 ngStyle 背景设置如下

<div  [ngStyle]="{'background-image': 'url(${profilePicPrefix + profileService.userDetails.profile_img})'}"  class="profilepic">
</div>

和

[ngStyle]="{'background-image': 'url('+ profilePicPrefix + profileService.userDetails.profile_img +')'}"  
// not working - String concatenation

和

[ngStyle]="{'background-image': 'url(${profilePicPrefix + profileService.userDetails.profile_img})'}"
// not working

我出现黑屏，图像未渲染但构建成功。

【问题讨论】：

你会得到什么样的 HTTP 响应？
@DusanRadovanovic，我会得到图片的网址
你看到了吗，或者你认为？
不要在里面应用所有字符串连接登录，而是在ts文件中创建一个方法，该方法应该返回像url('http://image')这样的确切字符串，然后你可以在html中使用该方法[ngStyle]="{'background-image': getImageUrl()}"跨度>

【解决方案1】：

我使用了给定的东西，请尝试一下

 [ngStyle]="{'background-image':'url(' + profileService.userDetails.profile_img + ')'}"

【讨论】：

【解决方案2】：

您忘记在括号内添加引号。

试试这个

[ngStyle]="{'background-image': 'url("'+ profilePicPrefix + profileService.userDetails.profile_img +'")'}"

【讨论】：

【解决方案3】：

试试这个

 [style.background-image]="'url('+ profileService.userDetails.profile_img +')'">

【讨论】：