ng重复中的损坏图像不会消失

Question

>我尝试了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>

看起来即使没有数据，它仍然试图渲染图像，并且完全忽略了ng-if="vm.doubleBookings.length > 0"

只是为了确认，这是来自我的控制器

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

这给出了结果

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

我真的无法弄清楚这一点 - 为什么它应该渲染图像是没有意义的?!?

我什至尝试过这个：

<img ng-if="vm.doubleBookings.length > 0" src="./img/flagNations/{{ bookings.country }}.png" class="start-flag">

相同的结果。

这是控制器的更大部分：

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

Answer 1

而不是

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

我把src=改成了ng-src=

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

问题消失了！！