Question

我试图做到这样的事情：

<img id="icon" class="cercle icon" src="getIcon({{item.status}})" alt="">

功能是：

getIcon(status){
    switch (status) {
      case 'Ongoing':
        return '../../../../assets/img/icon/PinPlot.png';
      case 'Signaled':
        return '../../../../assets/img/icon/PinWarning.png';
      case 'Finished':

      default:
        return '../../../../assets/img/icon/Pin red.png';
    }
  }

但我得到的并不是像没有找到的那样。但没有错误也没有警告。

有什么想法吗？

Answer 1

使用[src]：

<img id="icon" class="cercle icon" [src]="getIcon(item.status)" alt="">

此外，您不需要getIcon({{item.status}})但不需要{{}}。

Answer 2

虽然之前使用[src]的答案是我推荐的方式，但你现有技术不起作用的原因是因为你没有使用插值（即{{....}}）正确。

你有：

<img id="icon" class="cercle icon" src="getIcon({{item.status}})" alt="">

当你可能意味着：

<img id="icon" class="cercle icon" src="{{ getIcon(item.status) }}" alt="">

<强>解释

你可以这样想。在您的模板中，{{}}之外的所有内容都被视为文字字符串。它只是双括号内被视为执行代码的东西。所以，举个例子，因为你把括号放在哪里，你最终会得到字符串：

src="getIcon(Ongoing)"

插值后，因为你只在括号内包含item.status，而不是整个表达式。

调用<img/>中的函数来定义src的路径

2 个答案: