重复不显示图像

ng repeat not displaying images

本文关键字：显示图 图像 显示      更新时间：2023-09-26
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});

HTML部分

<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>

当我尝试这样做时，它打印图像标签而不是图像本身。push中的其他变量是string。字符串部分显示正常。有人能帮帮我吗?

仅使用图像的src作为字符串

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});

然后在html中使用绑定到src属性的<img> 

<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>

恰好

试试这样写。

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

然后在HTML中指定标签

    <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>

希望对你有帮助

还应记住使用ng-src

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

角文档

相关文章：