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

Posted 2023-02-19

【中文标题】Angular.js - 在 img src 标签中过滤

【英文标题】：Angular.js - Filter in img src tag

【发布时间】：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 解决的第一个问题***.com/questions/8124866/…">如何使用

【参考方案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 指令解决了这个问题。