Angular.js - 在 img src 标签中过滤答案

【问题标题】：Angular.js - Filter in img src tagAngular.js - 在 img src 标签中过滤
【发布时间】：2012-10-20 01:53:58
【问题描述】：

我们主要将 Angular 用于我们的搜索表单，这非常复杂。我们使用 Solr 作为搜索框架，并通过 AJAX/JSONP 获得我们的搜索结果，完美运行。

每个搜索结果中都应该有一张图片，但也有可能没有。当我的搜索结果中没有 img-URL 时，我使用过滤器来防止 Internet Explorer 中出现讨厌的“X”。

angular.module('solr.filter', []).
    filter('searchResultImg', function() {      
        return function(input) {
            if (typeof(input) == "undefined") {
                return "http://test.com/logo.png";
            } else { 
                return input;
            }
        };
});

我的链接图像在源代码中如下所示：

<a href="{{doc.url}}"><img src="{{doc.image_url | searchResultImg}}"/></a>

就像我说的，信息传递正确，我遇到的“问题”是 Firebug 使用 Angular src 发送 GET 请求，例如：

http://test.com/foldername/%7B%7Bdoc.image_url%20|%20searchResultImg%7D%7D

链接已编辑，因此无法使用。否则客户会吓坏;)

有没有人有这种行为的经验或知道为 src-tags 设置过滤器的更好方法？

【问题讨论】：

你可以通过 onerror attr 解决的第一个问题stackoverflow.com/questions/8124866/…">如何使用

标签： ajax solr angularjs

【解决方案1】：

尝试将src 替换为ng-src 以了解更多信息，请参阅the documentation 或this post。

<a href="{{doc.url}}"><img ng-src="{{doc.image_url | searchResultImg}}"/></a>

在 src 属性中使用像 {{hash}} 这样的 Angular 标记不起作用右：浏览器将从带有文字文本的 URL 中获取 {{hash}} 直到 Angular 替换 {{hash}} 中的表达式。这 ngSrc 指令解决了这个问题。

【讨论】：