圖像使用AngularJS獲取請求

Question

我在AngularJS控制器中存儲要以HTML格式呈現的圖像的源字符串，但是在初始化Angular控制器之前它會產生404。

這是HTML：

 <div ng-controller="Cont">
      <img src="{{imageSource}}">
 </div>

角度控制器：

 var Cont = function($scope) {
      $scope.imageSource = '/tests.png';
 }

我得到的錯誤（ %7D%7D對應於{{在模板中）。

 GET https://localhost:9000/%7B%7BimageSource%7D%7D 404 (Not Found) 

我怎樣才能防止這種情況發生？ 也就是說，只在Angular控制器初始化時才加載圖像？

Answer 1

嘗試用ng-src替換你的src以獲取更多信息，請參閱文檔 ：

在src屬性中使用{{hash}}之類的Angular標記無法正常工作：瀏覽器將使用文字文本{{hash}}從URL中獲取，直到Angular替換{{hash}}中的表達式。 ngSrc指令解決了這個問題。

 <div ng-controller="Cont">
      <img ng-src="{{imageSource}}">
 </div>

Answer 2

如果有人正在搜索樣式背景圖像的解決方案，那么使用此：

<div ng-style="{'background-image': 'url({{ image.source }})'}">...</div>