AngularJs中的圖像路徑

我在AngularJs中有一個圖像路徑$scope變量imageUrl，它來自外部源。AngularJs中的圖像路徑

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"

其項目的生根路徑。如何進行一些更改以在網頁上顯示圖像？

來源

2014-07-14 ankitr

如果你看一下產生的錯誤，它包含了一些URL編碼字符爲好。我將它輸入到a Url Decoder，這就是圖像url字符串的實際外觀。

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

注意括號和引號字符？

這使我相信$scope.imageUrl包含[""]符號。您可以輕鬆地測試了這一點，在旁邊<img>標籤，像這樣一個<pre>標籤渲染值...

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

如果呈現<pre>標籤值有[""]符號，那麼解決方法是刪除那些來自$scope.imageUrl屬性的符號。

您可以從IMAGEURL像這樣但是除去這些符號......

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

，如果你正在使用$ HTTP服務檢索來自Flickr的API，這個數據，你應該考慮使用transformResponse選項它允許您在解析promise之前處理來自http請求的數據（在您的情況下，刪除imageUrl中的壞字符）。

來源

2014-07-14 12:16:49 jessegavin

是的，它在圖像路徑中有[「....」]。我怎樣才能刪除它們？ – ankitr

你知道他們是如何到達那裏的嗎？ – jessegavin

它來自Flickr API。 – ankitr

我已經創建了一個小提琴，它在鉻和firefox中完美工作。希望它可以解決您的問題

Fiddle

HTML標記：

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

來源

2014-07-14 12:09:32 V31

是的，它與HTML運行。但與服務器創建問題。 – ankitr

@Ankit：再次看到您的錯誤，您需要從http：// localhost/demo/view/html /％5B％22http：//farm6.staticflickr.com/5579/14671096893_806ec359b7_m.jpg%22%刪除localhost url 5D「你需要有http://farm6.staticflickr.com/5579/14671096893_806ec359b7_m.jpg%22%5D」 – V31

HTML的

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

js-

function test($scope){ 

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

    }

來源

2016-12-14 10:30:18 Prasad

AngularJs中的圖像路徑

回答

相關問題