如何基於使用angular2的響應值分配圖像

Question

我正在一個應用程序上，其中有一個圖形部分。 我需要顯示基於1,0，-1的圖像。 我必須根據響應分別綁定圖像。 在演示中，即使我給了Google鏈接，我也無法顯示圖像。 請幫助我通過響應將值與圖像綁定在一起。

HTML：

<tbody>
                    <tr>
                      <td scope="row">PSF. &nbsp;&nbsp;$8.25</td>
                      <td><img class="graph-arrows" src="../../../assets/images/up-arrow.png"></td>
                      <td><img class="graph-arrows" src="../../../assets/images/double-arrow.png"></td>
                      <td><img class="graph-arrows" src="../../../assets/images/down-arrow.png"></td>
                    </tr>
                    <br>
                  </tbody>

TS：

this.propertiesPerMonth = [{
      "costPSF": { "market": 1, "region": 0, "national": -1 }
    },
    {
      "variances": {
        "expenses": [
          { "expense": "Janitorial", "market": 1, "region": 0, "national": -1 },
          { "expense": "Electricity", "market": 0, "region": 0, "national": -1 },
          { "expense": "HVAC", "market": -1, "region": -1, "national": 1 },
        ]
      }
    }
    ]

DEMO

Answer 1

您應該提供指向圖像的鏈接，而不是包含圖像的頁面，因此該URL應該以圖像擴展名結尾，例如.PNG或.SVG，例如，第一個URL應該是https://image.flaticon.com/ icons / svg / 32 / 32028.svg要獲取此URL，請右鍵單擊該圖像，然后單擊“在新選項卡中打開圖像”

Answer 2

在您的演示中，您是指向Google頁面的鏈接，而不是實際圖像。 嘗試用實際圖像替換它們，它們將起作用。

例如，嘗試鏈接“ https://onaliternote.files.wordpress.com/2016/11/wp-1480230666843.jpg ”。