【问题标题】:Why is ngStyle background-image not loading?为什么 ngStyle 背景图像没有加载?
【发布时间】:2020-08-26 10:18:52
【问题描述】:

我无法显示我的图片。以前是显示的。在我的容器/介绍模板中,我有:

<div mat-card-image class="quiz-topic-image"
      [ngStyle]="{ 'background': 'url(' + quizData?.imageUrl + ') no-repeat center center',
                   'background-size': '95%' }">
    </div>

在我的 quiz.ts 文件中,我有 imageUrl: 'DIDiagram.png',

图片在 assets/images/DIDiagram.png 中

我尝试更改图像的路径,但似乎没有任何效果。请你帮忙。谢谢。

【问题讨论】:

  • 您是否在控制台中遇到任何错误?

标签: angular ng-style


【解决方案1】:

backgroundno-repeatcenter centerbackground属性)而不是background-image

 imageUrl: './../assets/images/DIDiagram.png'

<div mat-card-image class="quiz-topic-image"
      [ngStyle]="{ 'background': 'url(&quot;' + quizData?.imageUrl + '&quot;) no-repeat center center',
                   'background-size': '95%' }">
    </div>

【讨论】:

  • 是的,我已将其更改为后台,但仍未显示...现在我进入 Chrome:加载资源失败:服务器响应状态为 404(未找到)
  • 你现在能检查一下图像是否以它的样式写入,并且来自 console.log 的图像名称正确吗?
  • 这是我检查元素时得到的:
  • 您能否再次尝试编辑答案的问题可能是"
  • 你也应该在你的 url 前面写下资产路径
猜你喜欢
  • 2018-10-12
  • 2016-08-04
  • 2020-05-10
  • 1970-01-01
  • 1970-01-01
  • 2016-04-24
  • 2019-11-26
  • 2020-02-25
  • 2018-02-12
相关资源
最近更新 更多