javascript - AngularJs 中的图像路径

Question

我在 AngularJs $scope 变量 imageUrl 中有一个图像路径，它来自外部源。

http://farm6.staticflickr.com/5579/14671096893_806ec359b7_m.jpg

我正在尝试获取 HTML 页面上的图像。

<img ng-src="{{imageUrl}}">

但是当我试图在 firefox 中运行它时，它给我错误

"NetworkError: 403 Forbidden - http://localhost/demo/view/html/%5B%22http://farm6.staticflickr.com/5579/14671096893_806ec359b7_m.jpg%22%5D"

它采用项目的根路径。如何进行一些更改以在网页上显示图像？

Answer 1

如果您查看生成的错误，它也包含一些 url 编码字符。我输入了a Url Decoder这就是图像 url 字符串的实际样子。

http://localhost/demo/view/html/["http://farm6.staticflickr.com/5579/14671096893_806ec359b7_m.jpg"]

注意到括号和引号字符了吗？

这让我相信 $scope.imageUrl包含 [""]符号。您可以通过在 <pre> 中呈现值来轻松地对此进行测试。 <img> 旁边的标签像这样标记...

<img ng-src="{{imageUrl}}">
<pre>{{imageUrl}}</pre>

如果渲染中的值<pre>标签有 [""]符号，则解决方案是从 $scope.imageUrl 中删除这些符号属性(property)。

您可以像这样从 imageUrl 中删除这些符号...

$scope.imageUrl = $scope.imageUrl.replace(/[\[\"\]]/g, "");

但是，如果您使用 $http 服务从 Flickr API 检索此数据，则应考虑使用 transformResponse允许您在解决 promise 之前从 http 请求中操作数据(在您的情况下，从 imageUrl 中删除坏字符)的选项。