รูปภาพรับคำขอด้วย AngularJS

ฉันกำลังจัดเก็บสตริงต้นทางของรูปภาพที่จะแสดงเป็น HTML ในตัวควบคุม AngularJS แต่จะให้ 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 เท่านั้น?

ลองแทนที่ src ของคุณด้วย ng-src สำหรับข้อมูลเพิ่มเติมโปรดดูเอกสาร :

การใช้มาร์กอัปเชิงมุมเช่น {{hash}} ในแอตทริบิวต์ src ใช้ไม่ได้: เบราว์เซอร์จะดึงข้อมูลจาก URL ที่มีข้อความตามตัวอักษร {{hash}} จนกว่า Angular จะแทนที่นิพจน์ภายใน {{hash}} คำสั่ง ngSrc ช่วยแก้ปัญหานี้ได้

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

หากมีใครกำลังค้นหาวิธีแก้ปัญหาสำหรับการจัดแต่งทรงผมภาพพื้นหลังให้ใช้สิ่งนี้:

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