【问题标题】:How to set Angular 4 background image?如何设置 Angular 4 背景图像?
【发布时间】:2017-08-11 10:13:36
【问题描述】:

我正在尝试以下几行来设置背景图像。但它不起作用。在我的应用程序中不断设置背景图像的方式是什么。

app.component.html

<div [ngStyle]="{'background' : 'url(./images/trls.jpg)'}">
    <router-outlet></router-outlet>
    <alert></alert>
</div>

【问题讨论】:

标签: javascript angular


【解决方案1】:

您可以使用ngStyle 为 div 设置背景

<div [ngStyle]="{background-image: 'url(./images/' + trls.img + ')'}"></div>

或者你也可以使用内置的背景样式:

<div [style.background-image]="'url(/images/' + trls.img + ')'"></div>

【讨论】:

  • 您忘记在第一个解决方案中添加右花括号。应该是
    感谢您的提示。
  • 更新了答案@BiswajitPanday。谢谢!
  • 嗨。我有完全相同的问题,但这里的答案对我的情况没有帮助。
  • @AkshayRaut,你的图片保存在哪里?你能分享完整的路径吗?
  • @AkashAgrawal 使用[style.background-image] 来避免覆盖已经设置的css属性不是更好吗?
【解决方案2】:

这对我有用:

把它放在你的标记中:

<div class="panel panel-default" [ngStyle]="{'background-image': getUrl()}">

然后在组件中:

getUrl()
{
  return "url('http://estringsoftware.com/wp-content/uploads/2017/07/estring-header-lowsat.jpg')";
}

【讨论】:

  • 如果你的 url 和我的一样有空格,你可能还想做一个 .replace(/\s/g, "%20") .
【解决方案3】:

以下答案适用于角度 4/5。

在 app.component.css 中

.image{
     height:40em; background-size:cover; width:auto;
     background-image:url('copied image address');
     background-position:50% 50%;
   }

同样在 app.component.html 中简单地添加如下

<div class="image">
Your content
</div>

这样我就可以在 Angular 4/5 中设置背景图片了。

【讨论】:

  • 整个互联网上唯一对我有用的代码。谢谢你一百万次!
  • 这不是 Angular,它只是普通的 HTML 和 CSS
  • 我完全同意!我只是说下面的内容对我有用 :)
  • 这不是答案:他在问如何通过js动态更改复制的图像地址值。
  • @SachinHatikankan ,此解决方案不适用于从 api 放置图像 url。这只是简单的 html&&css 解决方案。例如,要编写一些将获取的 url 以角度形式放入背景图像的内容,可以使用 [ngStyle]
【解决方案4】:

如果您计划在整个项目中大量使用背景图像,您可能会发现创建一个非常简单的自定义管道来为您创建 url 很有用。

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'asUrl'
})
export class BackgroundUrlPipe implements PipeTransform {

  transform(value: string): string {
    return `url(./images/${value})`
  }

}

然后你可以添加背景图像而不需要所有的字符串连接。

<div [ngStyle]="{ background: trls.img | asUrl }"></div>

【讨论】:

    【解决方案5】:

    在 HTML 中

    <div [style.background]="background"></div>
    

    在打字稿中

    this.background= 
    this.sanitization.bypassSecurityTrustStyle(`url(${this.section.backgroundSrc}) no-repeat`);
    

    一个可行的解决方案。

    What is the recommended way to dynamically set background image in Angular 4

    【讨论】:

      【解决方案6】:

      这对我也适用于 Internet Explorer:

      <div class="col imagebox" [ngStyle]="bkUrl"></div>
      

      ...

      @Input() background = '571x450img';  
      bkUrl = {};   
      ngOnInit() {
          this.bkUrl = this.getBkUrl();
        }
      getBkUrl() {
          const styles = {
            'background-image': 'url(src/assets/images/' + this.background + '.jpg)'
          };
          console.log(styles);
          return styles;
        }
      

      【讨论】:

      • 带有 src 的路径无法在构建中工作,dist 下没有 src 目录
      • netalex,这个解决方案似乎减慢了进程。阅读有关放置已获取数据和从函数读取数据的速度。有时它是从函数中获取数据的解决方案,我并不是说它不好。但是,在某些情况下,将函数放入模板中会很慢。在这种情况下,最好将this.background放在[ngStyle]中,在css/scss/etc中写额外的样式。文件,恕我直言。
      【解决方案7】:

      我想要一张 96x96 大小的个人资料图片,其中包含来自 api 的数据。以下解决方案在 Angular 7 项目中对我有用。

      .ts:

        @Input() profile;
      

      .html:

       <span class="avatar" [ngStyle]="{'background-image': 'url('+ profile?.public_picture +')'}"></span>
      

      .scss:

       .avatar {
            border-radius: 100%;
            background-size: cover;
            background-position: center center;
            background-repeat: no-repeat;
            width: 96px;
            height: 96px;
          }
      

      请注意,如果您在[ngStyle] 中写background 而不是'background-image',则您为其他背景属性(例如背景位置/大小等)编写的样式(即使在元素的style 中)将不会不工作。因为您已经使用background: 'url(+ property +) (no providers for size, position, etc. !)' 修复了它的属性。 [ngStyle] 优先级高于元素的style。在background 这里,只有 url() 属性可以工作。请务必使用'background-image' 而不是'background',以防您想向背景图像写入更多属性。

      【讨论】:

        猜你喜欢
        • 2019-07-24
        • 1970-01-01
        • 2018-02-04
        • 2021-02-01
        • 2020-03-20
        • 2019-01-04
        • 2018-03-25
        • 2011-01-11
        • 1970-01-01
        相关资源
        最近更新 更多