从 html 属性绑定设置 div 背景图像

Question

我正在尝试从后端以动态方式为 div 设置 background-image。 我使用django (djangorestframework) 作为后端。 我正在发送一个 http 请求，这是我收到的数据：

{
        "user": "1ad54d3c-a012-431a-9e7a-8630fd9fb566",
        "image": "api/media/users/1ad54d3c-a012-431a-9e7a-8630fd9fb566/tutorials/yyyy/_image/tutorialImage.png",
        "title": "yyyy",
        "description": "hgdhgdh",
        "level": "professional",
        "parts": 0,
        "offical": false
 }

这是html：

<div class="tutorial-card">
    <div class='tutorial-img' [style.background-image]="getTutorialImgURL(tutorial.image)">
</div>

getTutorialImageURL 函数：

public getTutorialImgURL(path: string){
    return `url("http://${config.backendDomain}/${path}")`;
 } // config.backendDomain is "localhost:8000"

好像没有向后端发送get请求（url路径是对的）

我尝试过的事情：

• 将前缀从http 更改为“https”

  • 它可以工作，但后端还不支持https，所以它返回code 400

• 使用[ngStyle]="{'background-image': getTutorialImgURL(tutorial.image)}"

  • 路径仍然正确，但不发送请求
• 使getTutorialImgURL返回完整样式（returnimage-backgr: url("http://${config.backendDomain}/${path}")`）
  • 与所有不发送 http 请求的正确路径相同
• 使用DomSanitizer (return this.sanitizer.bypassSecurityTrustStyle(url("http://${config.backendDomain}/${path}"));)
  • 还是和以前一样：正确的路径没有向后端发送 http 请求

（我不想使用<img [src]='...'>）

Answer 1

绑定到样式子属性似乎存在问题，因此您可以使用ngStyle 来定义完整的内联样式。使用示例组件：

@Component(
  {
    selector:'tutorial-image',
    template:`<div [ngStyle]="{ 'background-image': 'url(' + imgUrl + ')'}"></div>`
  })
export class TutorialImage {
  @Input() path:string
  imgUrl: string

  ngOnInit(){
     this.imgUrl= `http://${config.backendDomain}/${path}`
  }
}

注意，如果这是托管在 https 上，它将无法从非 https 端点检索图像（混合内容错误）

解决方案改编自：Attribute property binding for background-image url in Angular 2

工作堆栈闪电战：https://stackblitz.com/edit/angular-poxtf2