2

Now I am doing an angular 8 project. I need to load an image dynamically, that came from the back end. I want this image load in a particular div section. I tried this. but not working. Anybody help?

 <div class="col-md-5 box mt-4" style="background-image: url({{url}}/SupportingFiles/profile/{{institution_folder_name}}/idcards/front.jpg);">
Improve this question
3
  • This is my code <div class="col-md-5 box mt-4" style="background-image: url({{url}}/SupportingFiles/profile/{{institution_folder_name}}/idcards/front.jpg);"> Commented Apr 28, 2020 at 3:29
  • why don't you just put and img inside div, did you tried that ? Commented Apr 28, 2020 at 4:44
  • Use ngStyle to set the background. Check this out stackoverflow.com/questions/45632663/… Commented Apr 28, 2020 at 6:03

1 Answer 1

Reset to default
2

You need to add height and width of the background image to display it properly if you are using background-image. Otherwise it won't work.

 <div class="col-md-5 box mt-4" style="background-image: url({{url}}/SupportingFiles/profile/{{institution_folder_name}}/idcards/front.jpg); height: xxpx; width:xxpx">

Better add a class.

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

4 Comments

When I am using the above code, got a warning message like this core.js:6677 WARNING: sanitizing unsafe style value background-image: url(qa.embase.in/SupportingFiles/profile/qa/idcards/front.jpg); height: 950px; width:850px (see g.co/ng/security#xss).
How can I set the dynamic URL into class?
Watch this youtube.com/…
And if possible please create a stackblitz example

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.