javascript AngularJs 中的图像路径

Image path in AngularJs

提问by ankitr

I have a image path in AngularJs $scopevariable imageUrl, which comes from external source.

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

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

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

I am trying to get the image on HTML page.

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

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

But when I am trying to run this in firefox, it is giving me error

但是当我尝试在 Firefox 中运行它时，它给了我错误

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

Its taking root path of project. How can I make some changes to show image on the web page?

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

回答by jessegavin

If you look at the error that was generated, it contains some url encoded characters as well. I entered it into a Url Decoderand this is what the image url string actually looks like.

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

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

Notice the bracket and quote characters?

注意括号和引号字符吗？

This leads me to believe that $scope.imageUrlcontains the [""]symbols. You can easily test this out by rendering the value in a <pre>tag next to the <img>tag like so...

这使我相信$scope.imageUrl包含[""]符号。您可以通过在<pre>标签旁边的<img>标签中渲染值来轻松测试这一点，如下所示......

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

If the value in the rendered <pre>tag has the [""]symbols, then the solution is to remove those symbols from the $scope.imageUrlproperty.

如果呈现的<pre>标记中的值具有[""]符号，则解决方案是从$scope.imageUrl属性中删除这些符号。

You can remove these symbols from imageUrl like so...

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

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

However, if you're using the $http service to retrieve this data from the Flickr API, you should consider using the transformResponseoption which allows you to manipulate data (in your case, strip out bad characters from the imageUrl) from an http request before resolving the promise.

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

回答by V31

I have created a fiddle and it is working perfectly in chrome and firefox. Hope it solves your problem

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

Fiddle

小提琴

HTML Markup:

HTML 标记：

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

回答by Prasad

html-

html-

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

js-

js-

function test($scope){

     $scope.imageUrl = 'https://angularjs.org/img/AngularJS-small.png';

  }