如果原件不存在,则角度显示默认图像

前端之家收集整理的这篇文章主要介绍了如果原件不存在,则角度显示默认图像前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
如果图像存在,我想显示用户图像,如:
<img alt="user_image" src="/images/profile_images/{{result.image}}">

如果用户图像不可用,那么应该显示默认图像,喜欢

<img alt="user_image" src="/images/default_user.jpg">

如何通过html页面中的angularjs来做到这一点?

您可以创建一个指令checkImage来检查图像是否真的存在:
<img check-image ng-src="{{img}}" alt="Image" width="100%"  >

指示:

myApp.directive('checkImage',function($http) {
    return {
        restrict: 'A',link: function(scope,element,attrs) {
            attrs.$observe('ngSrc',function(ngSrc) {
                $http.get(ngSrc).success(function(){
                    alert('image exist');
                }).error(function(){
                    alert('image not exist');
                    element.attr('src','/images/default_user.jpg'); // set default image
                });
            });
        }
    };
});

见演示http://jsfiddle.net/manzapanza/dtt1z5p8/

猜你在找的Angularjs相关文章