动态ngSrc要求部队拦截HTTP [英] Force HTTP interceptor in dynamic ngSrc request

问题描述

我已经创建了从一个OAuth安全的后台加载图像的AngularJS应用。我的OAuth库通过增加一个额外的拦截器的角配置的 $ httpProvider 来添加正确的认证头。

I've created an AngularJS application that loads images from an OAuth secured backend. My OAuth library is configured by adding an extra interceptor to the Angular $httpProvider to add the correct authentication header.

在我的 HTML 模板我的源$ C ​​$ C是这样的：

My source code in my HTML template looks like this:


＆LT; IMG NG-SRC ={{'/用户/ 1 /图片/+ imageId}}＆GT;


我的问题是，由 ngSrc 指令产生的HTTP请求是由 $ HTTP 实施忽略，这导致与错误认证的请求。
正常的API调用函数正确的（通过使用我的控制器/服务调用的那些 $ HTTP 和 $资源直接）

My problem is that the http request that is created by the ngSrc directive is ignored by the $http implementation, which results in a request with the wrong authentication. The normal API calls function correct (the ones invoked by my controllers/services by using $http and $resource directly).

推荐答案

的 ngSrc 指令只是控制通常的src 属性对于IMG，这使得浏览器请求的图像就像任何其他的形象，而不是通过Javascript，所以我不认为这是可以被截获。

The ngSrc directive just controls the usual src attribute for an img, which makes the browser request the image just like any other image, not via Javascript, so I don't think this can be intercepted.

不过，你可以做什么，是写一个新的指令，保存httpSrc。这就可以用来 $ HTTP 通话获取图像，然后创建一个使用类似<一个响应数据URI href=\"http://stackoverflow.com/questions/20035615/using-raw-image-data-from-ajax-request-for-data-uri\">Using从数据URI Ajax请求的原始图像数据（虽然我不知道它的浏览器支持的）。

However, what you could do, is write a new directive, save httpSrc. This then can fetch the image using a call to $http, and then create a data URI with the response using something like Using raw image data from ajax request for data URI (although I'm not sure of the browser support for it).

这篇关于动态ngSrc要求部队拦截HTTP的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！