Setting div background image from html attribute binding

Question

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 · Accepted Answer · 2019-09-02 08:47:36Z

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

edited Sep 2, 2019 at 8:47

answered Sep 1, 2019 at 19:23

chrismclarke

2,11512 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

dsal3389 Over a year ago

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

chrismclarke Over a year ago

and is there any messages in the console? mixed content warning perhaps?

dsal3389 Over a year ago

Nope and I have already tried using DomSanitizer just to be safe and still none

chrismclarke Over a year ago

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

dsal3389 Over a year ago

even in the demo you send in stackblitz if you change the URL prefix from https to http you wont get the image

|

Collectives™ on Stack Overflow

Setting div background image from html attribute binding

things I have tried:

1 Answer 1

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

things I have tried:

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related