用值为 null 的 jsonp 图像对象替换占位符图像答案

【问题标题】：Substituting place holder image for jsonp image object with a value of null用值为 null 的 jsonp 图像对象替换占位符图像
【发布时间】：2015-12-20 04:25:57
【问题描述】：

我正在使用 angular 发出 ajax jsonp 请求以从 twitch.tv api 检索频道。一些频道没有徽标图像，因此我想为具有空徽标对象的频道放置一个占位符图像。我创建了一个对象 '$scope.imgs，它有两个当前属性：data.logo 是来自 twitch.tv api 的徽标图像，replaceData 是我想用作图像占位符的替换图像的图像 url .我创建了一个 if 语句来测试天气 data.logo 是否为空，如果它用替换图像字符串替换 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);

                    })

【问题讨论】：

标签： javascript angularjs jsonp

【解决方案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);    
});

【讨论】：

哇！我真的环游了世界......谢谢@charlietfl

【解决方案2】：

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

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

【讨论】：