Why I cannot set background image in Angular 13?-CodePudding

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?

CodePudding user response：

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 ></div>

your.component.css:

.image {
  height: 200px;
  width: 200px;
  background-image: url('https://picsum.photos/200');
}