Um versteckt ein Standardbild zu zeigen (anstelle eines gebrochenen Bild), wenn das Bild nicht physisch vorhanden ist, verwende ich dieses Stück Code:ng-src und onerror: Gelegentlich ein gültiges Bild
<img ng-show="order.img" ng-src="{{order.img | fPath}}" onerror="this.style.display='none';"/>
<img ng-hide="order.img" ng-src="{{'default.png' | imgPath}}" />
Hier sind fPath
, imgPath
Filter, die dem Bildnamen ein Präfix hinzufügen.
Die meiste Zeit funktioniert es gut (das Bild wird gerendert). In einigen Fällen wird das Bild jedoch nicht angezeigt. In solchen Fällen werden der Winkel Schnipsel zu diesem HTML übersetzt (man beachte die style="display: none;"
im ersten img-Tag):
<img ng-show="order.img" ng-src="http://xx.s3.amazonaws.com/o/img1.jpg" onerror="this.style.display='none'" src="http://xx.s3.amazonaws.com/o/img1.jpg" style="display: none;">
<img ng-hide="order.img" ng-src="http://xx.s3.amazonaws.com/default.png" class="ng-hide" src="http://xx.s3.amazonaws.com/default.png" style="">
Frage: Was ist der Grund dafür sein könnte? Und mögliche Problemumgehungen? Ist es, dass die onerror
früher als erwartet ausgelöst wird?
PS: http://xx.s3.amazonaws.com/o/img1.jpg
ist ein gültiger Bildpfad und ist verfügbar.
aktualisieren: Dies ist, wie die app/route/Controller
Strecke
t_app.config(function ($stateProvider, $urlRouterProvider, $httpProvider) {
// ...
$stateProvider.state('ref', {
url: '/orders/:ref',
templateUrl: 'views/order.htm',
controller: 'orderController'
});
// ...
});
-Controller definiert ist
t_app.controller('orderController', ['$scope', '$stateParams', function($scope, $stateParams) {
// Load the order (this step takes a while)
}]);
Wie deklarieren Sie Ihre eckige App und Controller? Es könnte sein, dass Ihre Seite gerendert wird, bevor der Controller geladen wird. – Schokea
Weitere Details hinzugefügt. Wird Ihre zweite Bemerkung dazu verwendet, 'onerror' früher oder später auszulösen? –
ist die Auftragsvariable, die von einem Remote-Aufruf geladen wird? oder hat es Zwischenwerte (sagen wir "http://xx.s3.amazonaws.com/" bevor "http://xx.s3.amazonaws.com/o/img1.jpg") – valepu