顯示圖像，但使用angularjs表達式設置圖像src時，瀏覽器控制檯顯示404錯誤

Question

我正在使用asp.net mvc應用程序，其中我也使用angularJS。

我有這個奇怪的問題進行正確的圖像顯示在瀏覽器，但瀏覽器控制檯顯示404錯誤顯示的原始angularjs代碼：

下面的代碼在我看來我設置了img的src：

<a href="#" data-product-id={{item.Id}} class="link-product-name" data-toggle="modal" data-target="#modal-product-details"> 
     <img data-product-id={{item.Id}} class="img-thumbnail img-responsive" src="{{rootUrl + item.imagePath}}" /> 
    </a> 

rootUrl是一個$ scope變量。

我是mvc和angularJS的新手。如果有人能幫助我，我會很感激。謝謝！

Answer 1

由角指令ng-src=

使用ng-src給你預期的結果替換src=屬性，因爲rootUrl + item.imagePath進行評估，其價值角度加載後更換。

<img data-product-id={{item.Id}} class="img-thumbnail img-responsive" ng-src="{{rootUrl + item.imagePath}}" /> 

但隨着src，瀏覽器嘗試加載名爲{{rootUrl + item.imagePath}}的圖像，這導致失敗的請求。

欲瞭解更多信息有關ng-src看到this question