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，这就是图片网址字符串的实际外观。

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属性中删除这些符号。

你可以像imageUrl一样删除这些符号......

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

但是，如果您使用$ http服务从Flickr API检索此数据，则应考虑使用允许您操作数据的transformResponse选项（在您的情况下，删除不良内容）解析promise之前来自http请求的imageUrl中的字符。

Answer 2

我创造了一个小提琴，它在chrome和firefox中完美运行。希望它能解决你的问题

Fiddle

HTML标记：

<div ng-app>
    <div ng-controller="test">
        <img ng-src="{{imageUrl}}">
    </div>
</div>

Answer 3

HTML -

`define INSTANCE_NUM 0       
`define INSTANCE_NAME(x) instance_name``x``
    mymodule #(.chan_no(`INSTANCE_NUM)) `INSTANCE_NAME(`INSTANCE_NUM) (
      .Addr     (ADDR_A  )
     ,.Data     (DATA_A  )
     ,.Clk      (CLK     )
    );

JS -

<div ng-app>
  <div ng-controller="test">
    <img ng-src="{{imageUrl}}">
    </div>
  </div>      
</div>

AngularJs中的图像路径

3 个答案: