0

I am trying to set a background-image for a div in a dynamic way from the backend. I am using django (djangorestframework) as the backend. I am sending a http request and this is the data I received:

{
        "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
 }

This is the html:

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

The getTutorialImageURL function:

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

It doesn't appear to send a get request to the backend (the url path is right)

things I have tried:

  • changing the prefix from http to 'https'

    • it works but the backend doesnt yet support https so it returns code 400

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

    • still correct path but doesnt send the request
  • make getTutorialImgURL return the full style (returnimage-backgr: url("http://${config.backendDomain}/${path}")`)
    • same as all corrent path not sending http requst
  • using DomSanitizer (return this.sanitizer.bypassSecurityTrustStyle(url("http://${config.backendDomain}/${path}"));)
    • still, as before: correct path not sending http request to the backend

(I don't want to use <img [src]='...'>)

chrismclarke
  • 1,995
  • 10
  • 16
dsal3389
  • 658
  • 1
  • 7
  • 26

1 Answers1

0

There seems to be an issue with binding to the style subproperty so instead you can use ngStyle to define the full inline styles. Using an example component:

@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}`
  }
}

Note, if this is hosted on https it will not be able to retrieve images from a non-https endpoint (Mixed content error)

Solution adapted from: Attribute property binding for background-image url in Angular 2

Working stackblitz: https://stackblitz.com/edit/angular-poxtf2

chrismclarke
  • 1,995
  • 10
  • 16
  • still the same as all correct path but not sending the request to the backend server, it is sending only when the prefix is https – dsal3389 Sep 02 '19 at 01:03
  • and is there any messages in the console? mixed content warning perhaps? – chrismclarke Sep 02 '19 at 08:28
  • Nope and I have already tried using `DomSanitizer` just to be safe and still none – dsal3389 Sep 02 '19 at 08:36
  • Yeah, from my own testing there seems to be a couple of issues with setting the background image from a template binding. But found an answer in another thread and have working so will update above – chrismclarke Sep 02 '19 at 08:43
  • even in the demo you send in stackblitz if you change the URL prefix from `https` to `http` you wont get the image – dsal3389 Sep 03 '19 at 07:19
  • Yes, please read the comment. If you serve a site on https you cannot link to assets hosted on http, it is a security feature present in web browsers. – chrismclarke Sep 03 '19 at 09:17
  • so how `` does it? – dsal3389 Sep 03 '19 at 21:40
  • It doesn't. If you are serving from localhost or a http site you won't have the restriction. If you deploy to a https site you will have the restriction. I've updated the stackblitz with img tags and both http/https as further proof. I hope that answers your question. – chrismclarke Sep 04 '19 at 11:31