Angular dynamic background images

前端 未结 4 1592
隐瞒了意图╮
隐瞒了意图╮ 2020-12-01 06:34

In the html template I have this style with a dynamic image:

相关标签:
4条回答
  • 2020-12-01 06:46
    <div id="component-id" [style.background-image]="'url(www.domain.com/path/'+bgImageVariable+')'">
        <!-- ... -->
    </div>
    

    or

    <div id="component-id" [style.background-image]="'url('+bgImageVariable+')'">
        <!-- ... -->
    </div>
    

    you can use in second way by adding URL path in a single variable. for example

    bgImageVariable="www.domain.com/path/img.jpg";
    
    0 讨论(0)
  • 2020-12-01 06:54

    use this and set height and width of div tag as per you need

    <div id="component-id" [style.backgroundImage]="'url('+bgImageVariable+')'"></div>
    
    0 讨论(0)
  • 2020-12-01 06:57

    Use instead

    <div [ngStyle]="{background: 'url(/img/' + item.img + ')', width: '200px', height: '150px'"></div>
    

    or

    <div [style.background]="'url(/img/' + item.img + ')'"
        [style.width.px]="200" [style.height.px]="150p"></div>
    

    See also In RC.1 some styles can't be added using binding syntax

    0 讨论(0)
  • 2020-12-01 06:57

    You should do that as the +Günter Zöchbauer second part answer generates unwanted supplementary style background-position: initial and background-size: initial on Safari at least.

    Note that I only set the background-image style:

    <div [style.background-image]="'url(/img/' + item.img + ')'"
     [style.width.px]="200" [style.height.px]="150p"></div>
    
    0 讨论(0)
提交回复
热议问题