用空值替换 jsonp 图像对象的占位符图像

Question

使用 angular 我正在发出 ajax jsonp 请求以从 twitch.tv api 检索频道。一些频道没有徽标图像，所以我想为带有空徽标对象的频道放置一个占位符图像。我创建了一个对象 '$scope.imgs，它有两个当前属性：data.logo 是来自 twitch.tv api 的徽标图像，replaceData 是图像 url到我想用作图像占位符的替换图像。我创建了一个 if 语句来测试天气 data.logo 是否为 null，如果它用替换图像字符串替换 src 属性字符串，但我使用的是 ng-src，所以我想知道如何定位 ng- src 以及我是否采用正确的方法将通道替换为空图像对象值？

还有更多代码，但这是我遇到困难的部分..

$http.jsonp(url + streamers[i] + callback).success(function(data) {

                        $scope.imgs = {
                            current: data.logo,
                            replacement: "http://www.zwani.com/graphics/hello_funny/images/56467.jpg"
                        }

                        if (data.logo === null) {
                            $scope.imgs.current = $scope.imgs.replacement;
                            var replaceData = $scope.imgs.current;
                            console.log($scope.imgs.current);
                            document.getElementsByTagName('img').src = replaceData;
                        }

                        self.info.push(data);

                    })

Answer 1

你把它复杂化了。您只需要用 url 字符串更新属性即可。

Angular 会负责为您展示它

$http.jsonp(url + streamers[i] + callback).success(function(data) {
   var placeholder ="http://www.zwani.com/graphics/hello_funny/images/56467.jpg";
   if(!data.logo){
       data.logo = placeholder ;
   }
   self.info.push(data);    
});

Answer 2

您也可以让 data.logo 为 null，然后在您的 html 中执行类似这样的操作...

<img ng-src="{{$scope.imgs.logo || 'http://www.zwani.com/graphics/hello_funny/images/56467.jpg'}}">

用空值替换 jsonp 图像对象的占位符图像

Substituting place holder image for jsonp image object with a value of null

javascript

jsonp

angularjs