-1

My goal is to provide a dynamic image by binding to the background-image attribute. Here is a Stackblitz exemplifying the current state of the problem.

As you can see...

I have tried sanitizing the string that I am feeding into the element style.

I have made sure that my syntax without making it dynamic is correct.

I checked similar issues but they were still too dissimilar to be of use: ngStyle background-image even Gunter's post didn't help: Angular 2 ngStyle and background-image

Here is the background image:

.background-image{
  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.9) 75%, white 110%),  url("https://www.futurity.org/wp/wp-content/uploads/2018/05/reading-on-grass_1600.jpg");

I just want to put that string after background-image in the component like so:

public imgSmall = 'linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.9) 75%, white 110%),  url("https://www.futurity.org/wp/wp-content/uploads/2018/05/reading-on-grass_1600.jpg")';

so that I can change it to a higher res when not in mobile.

I need it in this format as opposed to <img src> format

imnickvaughn
  • 2,774
  • 9
  • 25
  • 42

1 Answers1

1

I'd consider doing it a bit differently like here in a forked version of your StackBlitz

We deliver the gradient overlay with a segregated :after pseudo class so it's not passed around all the time and static for easier maintenance and less bloat. Also allows you to store urls as string instead of the whole url("blah/blah") so you could say throw an array of url's at it easier etc. You're also not needing to invoke sanitize or other redundant processes.

Anyway hope this helps. Cheers!

Chris W.
  • 22,835
  • 3
  • 60
  • 94
  • That helped immensely Chris! I will be unable to use this though because I need to pass styles from the host and can't do this with pseudo-classes present. How would you accomplish this goal effectively without the pseudo class? – imnickvaughn Apr 01 '19 at 13:23
  • 1
    @imnickvaughn I'd wonder more around the scenario of needing to pass styles from the host and whether you couldn't just do it the same, except with the addition of passing the css classes via a quick `{{classes}}` into the the DOM as `` so you could retain the cleanliness of everything else and at least kind of segregate presentation layer elements at least a little? and only store that gradient stuff in one spot for maintenance purpose in case an exec decides they want it "just a little different" lol – Chris W. Apr 01 '19 at 14:23