Following another stackoverflow answer, I tried following:
<div [style.background-image]="'url(https://picsum.photos/200)'"></div>
This does have no effect and no picture is shown. If I use the <img> tag instead and set the same url, it works. But I need it as a div background.
Can anyone tell me what I am doing wrong and how to set the image background of the div correctly?
>Solution :
The problem stands in your div definition. A div element have nothing inside so his height/width is 0. Try to something like:
your.component.html:
<div class="image"></div>
your.component.css:
.image {
height: 200px;
width: 200px;
background-image: url('https://picsum.photos/200');
}
An example in stackblitz:
https://stackblitz.com/edit/angular-ivy-bmrp6j