Question

我正在开发一个AngularJS应用程序，它显示从服务器检索的PNG图像。

如果我把URL（见下文）放在浏览器中，我可以很好地看到图像。但是，如果我想从我的Angular应用程序中检索这样的图像，我无法显示它（虽然我确实收到了数据！）。

JS代码如下：

$scope.receivedImage = null;

var url = 'https://subdomain.mydomain.uk/img?latitude=55.57&longitude=-5.16&extent=2000';

$http(
    {
        method: 'GET',
        url: url,
        headers: {
            Accept: 'image/png'
        }
    }
).then(
    function successCallback(response) {
        var data = response.data;
        $scope.receivedImage = data;
    },
    function errorCallback(response) {
        console.error(response);
    }
);

问题是我无法看到检索到的图像。为了更好地理解我在HTML页面中添加以下代码的情况：

<div ng-show="receivedImage">
    <pre>{{receivedImage}}</pre>
    <img data-ng-src="{{receivedImage}}" />
    <img data-ng-src="data:image/png;{{receivedImage}}" />
</div>

''显示类似

的内容

PNGIHDR R9 ％IDATx 2 ' j Z V w LxIEND B`

第一个''没有显示任何内容。

第二个''显示一个图像图标并在控制台中抛出一个错误：

GET 数据：图像/ PNG;％EF％BF％BDPNG％1A％00％00％00IHDR％00％00％00％1E％00％00％00％1E％08％02％0 ...％BD％EF％BF％ BD％EF％BF％BD％EF％BF％BDL％0E％17X％00％00％00％00IEND％EF％BF％BDB`％EF％BF％BD 净:: ERR_INVALID_URL

如何正确渲染此图像？

Answer 1

尝试将ng-src属性设置为url。

变量

$scope.url = 'https://subdomain.mydomain.uk/img?latitude=55.57&longitude=-5.16&extent=2000';

和标记

<img ng-src="{{url}}" />

Answer 2

如果网址不受保护，那么来自Anthony的方法会有很大帮助。对于URL被保护的用例，我必须采用以下方法。在这种情况下，我必须通过覆盖angular的http身份验证拦截器来注入身份验证标头，以便访问受保护的URL。

"../../your image containingfolder /logo.png"

在您的控制器或指令中，来自上述调用的数据必须按如下方式处理：

    // http call inside a service under a function named getImage()
    $http(
        {
            method: 'GET',
            url: 'YOUR_PROTECTED_RESOURCE_URL',
            // This is required for getting your data as buffer array
            {
                responseType: 'arraybuffer'
            }
        }
    ).then(
        function successCallback(response) {
            return response;
        },
        function errorCallback(response) {
            console.error(response);
        }
    );

希望这有助于尝试从受保护资源URI访问资源的人。

在AngularJS中渲染远程PNG图像

2 个答案: