Angularjs 断开的图像在ng中重复，不会消失

我尝试了ng hide和ng if，无论我做什么，控制台日志都会显示一个带空值的损坏图像，如下所示：

%7B%7B%20bookings.country%20%7D%7D.png:1 
GET http://localhost:8080/img/flagNations/%7B%7B%20bookings.country%20%7D%7D.png 
404 (Not Found)

下面是导致这种情况的代码：

<table class="start-table" ng-if="vm.doubleBookings.length > 0">
<tbody>
    <tr ng-repeat="bookings in vm.doubleBookings" class="start-text">
        <td class="start-left">
            <img src="./img/flagNations/{{ bookings.country }}.png" class="start-flag">
            <b class="start-country">{{ bookings.country | uppercase }}</b> 
            {{ bookings.name }}
        </td>
    </tr>
</tbody>
</table>

结果是什么

from getDoubleBooking: {
    "doubleBooking": [],
    "sameDayBooking": []
}
LENGTH RES: 0
LENGTH VM: 0

我真的搞不懂这一点——为什么要渲染图像呢

我甚至试过：

同样的结果

以下是控制器的更大部分：

// 
// Find Double Bookings and Same Day Bookings
// 
var findDoubleBooking = () => {
    return new Promise((resolve, reject) => {
    $http({
        method: 'POST',
        url: globalSetting.serverURL + 'manager/getDoubleBooking',
        headers: { 'Content-Type': 'application/json' },
        data: {"checkout" : 5299014799}
    }).then(function successCallback(result) {
        console.log('from getDoubleBooking: ' + JSON.stringify(result.data.res, null, 4))
        var res = result.data.res;
        console.log("LENGTH RES: " + res.doubleBooking.length)
        vm.doubleBookings = res.doubleBooking; 
        console.log("LENGTH VM: " + vm.doubleBookings.length)
        vm.sameDayBookings = res.sameDayBooking; 
        console.log("LENGTH VM: " + vm.sameDayBookings.length)

        resolve();
    }, function errorCallback(err) {
        reject(new Error('getDoubleBooking ERROR : ' + err));
    });
})};

这是整个HTML片段

<!--Double Bookings Table-->
<table border="0" cellspacing="0" cellpadding="0" class="start-table start-double-table" ng-if="vm.doubleBookings.length > 0">
<tbody>
    <tr class="start-header start-bold start-double-bg">
        <td colspan="5" class="start-padding overflow">
            DOUBLE BOOKINGS - FIX THEM NOW!
        </td>
    </tr>
    <tr class="start-header start-head start-double-bg">
        <td class="start-left nowrap" style="min-width:76px;">Property</td>
        <td class="start-center overflow" style="width:13%">Checkin</td>
        <td class="start-center overflow" style="width:13%">Checkout</td>
        <td class="start-left overflow" style="width:44%">Tenant</td>
        <td class="start-right overflow" style="width:10%">Paid</td>
    </tr>

    <tr ng-repeat="bookings in vm.doubleBookings" class="start-text">
        <td class="start-left start-border nowrap" ng-class="{'start-double': !$last && bookings.property !== vm.doubleBookings[$index + 1].property}">
            <span class="chan-{{ bookings.source }}">{{ bookings.source }}</span>&nbsp;{{ bookings.property }}
        </td>
        <td class="start-center start-border overflow" ng-class="{'start-double': !$last && bookings.property !== vm.doubleBookings[$index + 1].property}">{{bookings.checkin*1000 | date : 'dd MMM' }}</td>
        <td class="start-center start-border overflow" ng-class="{'start-double': !$last && bookings.property !== vm.doubleBookings[$index + 1].property}">{{bookings.checkout*1000 | date : 'dd MMM' }}</td>
        <td class="start-left start-border overflow" ng-class="{'start-double': !$last && bookings.property !== vm.doubleBookings[$index + 1].property}">
            <img ng-if="vm.doubleBookings.length > 0" src="./img/flagNations/{{ bookings.country }}.png" class="start-flag">
            <b class="start-country">{{ bookings.country | uppercase }}</b> 
            {{ bookings.name }}
        </td>
        <td class="start-right start-border overflow" ng-class="{'start-double': !$last && bookings.property !== vm.doubleBookings[$index + 1].property}">{{ bookings.paidAlready }}</td>
    </tr>
</tbody>
</table>
<div class="spacer" ng-if="vm.doubleBookings.length > 0"></div>

双人预订-立即解决！
财产
签到
结账
房客
支付
{{bookings.source}{{bookings.property}}
{{bookings.checkin*1000}日期：'dd-MMM'}
{{bookings.checkout*1000}日期：'dd-MMM'}
{{bookings.country}大写}
{{bookings.name}
{{bookings.paidAlready}

而不是

<img src="./img/flagNations/{{ bookings.country }}.png">

---

问题已经解决了

可能需要你透露更多的控制器代码来复制你的问题Samuel Toh，现在请看一看奇怪的是，即使有数据，我仍然会得到相同的损坏图像错误，并且我检查了所有数据中是否存在有效的国家/地区。什么是

$scope.vm.doubleBookings

初始化为？

导出默认函数startController（$scope，$http，$interval）{var vm=this；vm.init=function（）{

<img src="./img/flagNations/{{ bookings.country }}.png">

<img ng-src="./img/flagNations/{{ bookings.country }}.png">