动态图像路径未显示在 Angular 7 的 [style.background-image] 属性中

Posted

技术标签:

【中文标题】动态图像路径未显示在 Angular 7 的 [style.background-image] 属性中【英文标题】:dynamic image path not showing in [style.background-image] property in Angular 7 【发布时间】:2019-05-17 13:14:26 【问题描述】:

我正在尝试在我的一个 Angular6 项目中使用动态图像路径作为背景图像。 我尝试使用 [style.background-image] 和 [style.background] 甚至 encodeURI 来修复路径中的空格也尝试使用 *ngIF 以便在加载后呈现。

案例一:

imgPath 是绝对路径,我将 JSON 数据的路径附加到该路径。

HTML 代码

    <a routerLink="/article/news.id">        
      <img [style.background-image]="'url(' + imgPath + news.encodedImage.encocoded_primary_image + ')'">          
    </a>

组件

使用 encodeURI() 函数检查图像中的空格和其他括号

'encocoded_primary_image': encodeURI(res['primary_image']['file_path'])

输出

Image comparison of article

如图所示“s/Absorica%20(2).png”有括号,这可能是导致错误的原因,但不确定。

其他情况

我尝试使用 [style.background][ngStyle] ,将图像标签更改为 div 标签。

但我无法理解为什么很少有图像正在渲染而很少有没有渲染,尽管路径生成正确,我已经通过在新标签中打开它们来确认。

我们将不胜感激任何帮助

【问题讨论】:

能否请您在 StackBlitz 中提供一个 Demo。我不确定我是否理解一切正确。哪些文件不工作,哪些是?有模式吗?括号不应该真的打扰角度 @Joniras 现在解决了.. 你可以检查下面的解决方案它对我有用。 【参考方案1】:
    background-image: url 中接受字符串。您必须将图像路径添加到字符串。

"'url(\'' + imgPath + news.encodedImage.encocoded_primary_image + '\')'"

<a routerLink="/article/news.id">
  <img [style.background-image]="'url(\'' + imgPath + news.encodedImage.encocoded_primary_image + '\')'">
</a>

https://developer.mozilla.org/en-US/docs/Web/CSS/background-image

https://www.w3schools.com/csSref/pr_background-image.asp

    尝试使用 escape() 方法,但该方法已被弃用。小心使用。

    https://developer.mozilla.org/en-US/docs/Web/javascript/Reference/Global_Objects/escape

【讨论】:

right .. escape() 已被弃用, encodeURI() 可能会在一些特殊字符中抛弃您,因此最好将图像路径设为字符串。【参考方案2】:

不要使用任何 ElementRef、DomSanitizer

组件中:

img = '';
data()       //image url -> if it comes from anywhere & any time
   this.img = 'http://img.....'

模板中: 在任何支持的标签中使用

<div style="background-repeat: no-repeat; background-size: cover;"
 [style.background-image]='"url(\"" + banner + "\")"'></div>

//或

<div style="background-repeat: no-repeat; background-size: cover;"
 [style.background-image]="'url(\'' + banner + '\')'"></div>

【讨论】:

以上是关于动态图像路径未显示在 Angular 7 的 [style.background-image] 属性中的主要内容,如果未能解决你的问题,请参考以下文章

如何从静态后端路径在 Angular 中显示图像?

Vue.js 动态图像路径未加载

Angular 7:“找不到具有未指定名称属性的控件”

部署iis后未加载Angular svg图像

动态 UISlider - 图像未显示

Angular 4+ 背景 css 参考 URL 图像路径