在 Ionic 的 ngFor 中显示图像答案

【问题标题】：Display image in ngFor in Ionic在 Ionic 的 ngFor 中显示图像
【发布时间】：2018-10-02 20:31:21
【问题描述】：

我有一个与此处描述的非常相似的问题，但不幸的是，答案中提供的解决方案都不适合我。我正在尝试在我的一个 Ionic 视图中显示 ngFor 中的图像。

代码如下：

  <div
    class="activities__elem-img"
    [ngStyle]="{
      'background-image':'url(http://mybackend.com/' + item.node.image ? item.node.image.key : 'notfound' + ')'
    }"
  ></div>

不幸的是，样式没有显示在 DOM 中。但是，此代码适用于其他 CSS 属性，例如 background-size。如何显示图像？

我在 HTML 代码中看到的是：ng-reflect-ng-style="[object Object]"。我希望我会看到一个指向我的图片的 URL。

编辑：按照评论中的建议工作，但当我将其放入函数时不起作用：

[ngStyle]="{
  'background-size': 'contain',
  'background-image': getImageUrl(item)
}

还有我的功能：

getImageUrl({ node }) {
  const imageUrl = `http://my.backend.com/${node.image ? node.image.key : "notfound"}`;
  return `url ( '${imageUrl}' )`;
}

【问题讨论】：

当您检查生成的 HTML 时，URL 是您所期望的吗？
您应该在条件运算符周围加上括号：... + (item.node.image ? item.node.image.key : 'notfound') + ...。
在您修改的问题中，确保将正确的参数传递给函数：getImageUrl(item.node)。
通过了。我什至将函数的结果记录到控制台，似乎没问题
但是你传递了item，你的方法需要item.node。此外，您可以尝试删除方法最后一行的内引号。

标签： angular ionic-framework

【解决方案1】：

由于+ 运算符的precedence 高于?: 运算符，因此您的表达式相当于：

('url(http://mybackend.com/' + item.node.image) ? item.node.image.key : ('notfound' + ')')

您应该在条件运算符周围加上括号：

'url(http://mybackend.com/' + (item.node.image ? item.node.image.key : 'notfound') + ')'

【讨论】：