ng重复不显示图像

Question

var name = last_name + ',' + first_name;
if(party=="R")
    party="<img src='/images/r.png'>";
else
    party="<img src='/images/d.png'>";
if(chamber == "senate")
    chamber="<img src='/images/s.svg'>Senate";
else
    chamber="<img src='/images/h.png'>House";
$scope.users.push({
    party_name:party,
    fullname:name,
    chamber_name:chamber,
    district_name:district,
    state_name:state});

The HTML part

<tr ng-repeat="user in users">
    <td>{{user.party_name}}</td>
    <td>{{user.fullname}}</td>
    <td>{{user.chamber_name}}</td>
    <td>{{user.district_name}}</td>
    <td>{{user.state_name}}</td>
</tr>

When I try to do this its prints the image tags instead of the image itself. The other variables in push are Strings. The string parts are displayed properly.Can someone please help me??

Answer 1

Use Just the src of the image as the string

var name = last_name + ',' + first_name;
if(party=="R")
    party="/images/r.png";
else
    party="/images/d.png";
if(chamber == "senate")
    chamber="/images/s.svg";
else
    chamber="/images/h.png";
$scope.users.push({
    party_name:party,
    fullname:name,
    chamber_name:chamber,
    district_name:district,
    state_name:state});

Then in the html use an <img> with binding to the src attribute

<tr ng-repeat="user in users">
    <td> <img src="{{user.party_name}}" /> </td>
    <td>{{user.fullname}}</td>
    <td> <img src="{{user.chamber_name}}" /> </td>
    <td>{{user.district_name}}</td>
    <td>{{user.state_name}}</td>
</tr>

PLUNKER

Answer 2

Try using something like this.

var name = last_name + ',' + first_name
if(party=="R")
    party='/images/r.png';
else
    party='/images/d.png';

if(chamber == "senate")
    chamber='/images/s.svg';
else
    chamber='/images/h.png';

$scope.users.push({
    party_name:party,
    fullname:name,
    chamber_name:chamber,
    district_name:district,
    state_name:state});
enter code here

Then in the HTML assign the tag

    <tr ng-repeat="user in users">
        <td>{{user.party_name}}</td>
        <td>{{user.fullname}}</td>
        <td><img src="{{user.chamber_name}}"/> </td>
        <td><img src="{{user.district_name}}"/></td>
        <td>{{user.state_name}}</td>
    </tr>

Hope it can help you.

Answer 3

Also remember you should use ng-src

<td><img ng-src="{{user.chamber_name}}"/></td>

Angular docs