使用 AngularJS 获取图像请求 [英] Image Get Requests with AngularJS

问题描述

我将要在 HTML 中呈现的图像的源字符串存储在 AngularJS 控制器中，但是在 Angular 控制器初始化之前它会产生 404.

这是 HTML:

 
<img src="{{imageSource}}">

角度控制器:

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

我得到的错误(%7D%7D 对应于模板中的 {{).

 GET https://localhost:9000/%7B%7BimageSource%7D%7D 404(未找到)

我怎样才能防止这种情况发生?也就是说，只有在 Angular 控制器初始化后才加载图像?

解决方案

尝试将 src 替换为 ng-src 以获取更多信息，请参见 文档:

<块引用>

在 src 属性中使用像 {{hash}} 这样的 Angular 标记不起作用右:浏览器将从带有文字文本的 URL 中获取{{hash}} 直到 Angular 替换 {{hash}} 中的表达式.这ngSrc 指令解决了这个问题.

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

I am storing the the source string of an image to be rendered in HTML in the AngularJS controller, however it yields a 404 before the Angular controller is initialized.

Here is the HTML:

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

Angular controller:

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

And the error I get (%7D%7D corresponds to the {{ in the template).

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

How can I prevent this from happening? That is, only load the image when the Angular controller has been initialized?

解决方案

Try replacing your src with ng-src for more info see the documentation:

Using Angular markup like {{hash}} in a src attribute doesn't work right: The browser will fetch from the URL with the literal text {{hash}} until Angular replaces the expression inside {{hash}}. The ngSrc directive solves this problem.

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

这篇关于使用 AngularJS 获取图像请求的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！