CODEWITHSUNDEEP
javascriptangular
Bhrungarajni
Bhrungarajni

Reputation: 2545

how to assign the images based on values from response using angular2

i am working on a application, wherein it has a graph section. i need to show the images based on 1,0,-1. i have to bind the images respectively based on the response. In demo i am not able to display the images even though i gave google links. Please help me to bind the values along with the images through response.

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

Upvotes: 2

Views: 57

Answers (2)

Ala Abid
Ala Abid

Reputation: 2326

You should provide a link to the image, not the page containing the image, thus that URL should end with an image extension like .PNG or .SVG, for example the first url should be this https://image.flaticon.com/icons/svg/32/32028.svg To get this url, right-click the image and "Open Image in new Tab"

Upvotes: 1

ViqMontana
ViqMontana

Reputation: 5698

In your demo, your are links to google pages, not actual images. Try replacing them with actual images and they will work.

E.g. try the link "https://onaliternote.files.wordpress.com/2016/11/wp-1480230666843.jpg" as an example.

Upvotes: 1

Related Questions