Question

我有一个api，如果图像在与该id相对应的服务器上，则返回图像，如果图像不存在，则返回json响应＆＃34; No Image＆＃34; 。< / p>

所以，当＆＃34;没有图像＆＃34;响应是在那时我必须使用angularjs使用dummuy图像。

这是我的代码：

server = "http://localhost:8000/"
            $scope.image = function (id) {
                return test = server + 'api/image/' + id;
            };

HTML code：

     <img width = 100px; height:60px; ng-src="{{image(n.userID)}}"  alt="" class="img-responsive"/>

如果＆＃34;没有图像＆＃34;请告诉我如何放置虚拟图像？在那里？....

Answer 1

请在此处http://jsbin.com/havuy/2/edit查看您可以使用ng-show / hide显示正确的图片，或者没有图片＆＃39;占位符

 <img width = 100px; height:60px; ng-src="{{image(n.userID)}}"  alt="" class="img-responsive" ng-show="image(n.userID)!='no image'" />
  <img ng-src="http://www.isrj.net/ArticleImage/No_Image.jpg" ng-hide="image(n.userID)!='no image'">

Answer 2

我创建了一个非常简单的Angular指令，它会在出现错误时隐藏img元素。

angular.module('SomeModuleName', [])
.directive('hideEmptyImage', function() {
    return {
        restrict: 'A',
        link: function(scope, elem, attrs) {
            elem.error(function(err) {
                elem.hide();
            });
        }
    };
});

像我说的那样，非常简单。然后对于我想要隐藏的每个图像，我只想：

<img hide-empty-image ng-src="{{n.userID}}" />

如果您想要使用默认值替换图像，我会使用相同的概念。我首先要更改指令的名称，因为它是合乎逻辑的，对吧？然后在错误上设置ng-src属性：

.directive('defaultImage', function() {
    return {
        restrict: 'A',
        link: function(scope, elem, attrs) {
            elem.error(function(err){
                attrs.$set('ngSrc', '/path/to/default.png');
            });
        }
    }
});

你的HTML看起来像这样：

<img default-image width = 100px; height:60px; ng-src="{{image(n.userID)}}"  alt="" class="img-responsive"/>

如果没有图像，则使用此指令，它将使用默认图像替换它。简单。

如果使用angularJs返回api的类型是“无图像”，如何显示虚拟图像？

2 个答案: