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

问题描述

我存储在HTML中AngularJS控制器被渲染的图像的源串，但是它产生了404的角控制器被初始化之前

下面是HTML：

 ＆LT; D​​IV NG控制器=续＆GT;
      ＆所述; IMG SRC ={{的ImageSource}}＆GT;
 ＆LT; / DIV＆GT;
 

角控制器：

  VAR续=功能（$范围）{
      $ scope.imageSource ='/tests.png';
 }
 

和我得到的错误（％7D％7D 模板对应于 {{）

  GET https：//开头本地主机：9000 /％7B％7BimageSource％7D％7D 404（未找到）
 

我如何prevent这种情况发生？也就是说，只有当角控制器已初始化加载图像？

解决方案

尝试用NG-SRC更换你的src更多信息见的文档：

  

采用了棱角分明的标记像{{哈希}}在src属性不起作用
  右：浏览器将来自URL抓取的文字文本
  {{哈希}}，直到角替换里面的前pression {{哈希}}。该
  ngSrc指令解决了这个问题。

 ＆LT; D​​IV NG控制器=续＆GT;
      ＆LT; IMG NG-SRC ={{}的ImageSource}＆GT;
 ＆LT; / DIV＆GT;
 

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屋！