javascript - 当第一个抛出 404 时，ng-src 路径不选择替代图像 url

Question

当图像的 url 未返回 404 时，我尝试在网页中显示该图像。我正在使用 AngularJS。

我无法使用 ngIf 检查 url，因为它会检查其是否为 null。当 url 返回或不返回 404 时，我会显示一些内容，但如果是 404，我会显示此内容。

有没有办法在返回 404 时不显示图像并在图像存在时显示图像。HTML 代码

<img class="menu" ng-if="$ctrl.companyLogo" ng-src="{{ $ctrl.companyLogo}}">

JavaScript 代码:

ctrl.companyLogo="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"

当 companyLogo 返回 404 时，它不会显示默认 Logo ，而是不显示任何图像。

Answer 1

借助 Image 对象，您可以检查图像路径是否返回 404 或实际图像

var given_src = 'http://idontexist.com/404.png';
var image = new Image();
image.src = given_src;
image.onerror = function(){console.log('doesnt exist or smth ');}
image.onload = function() {console.log('exists or smth');};

这是一个 fiddle https://jsfiddle.net/pLbdqf5d/ ，您还应该注意， fiddle 中的 $scope.$apply 是一个 hacky 解决方案，您应该实现此功能的 promise 。