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

发布时间：2020-12-17 08:07:45 所属栏目：安全来源：网络整理

导读：如果图像存在，我想显示用户图像，如： img alt="user_image" src="/images/profile_images/{{result.image}}" 如果用户图像不可用，那么应该显示默认图像，喜欢 img alt="user_image" src="/images/default_user.jpg" 如何通过html页面中的angularjs来做到

如果图像存在，我想显示用户图像，如：

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!