详解AngularJS中ng-src指令的使用  更新时间:2016年09月07日 11:08:22   投稿:daisy   这篇文章给大家详细介绍了AngularJS中ng-src指令的使用,对大家学习AngularJS具有一定参考价值,有需要的朋友们可以参考借鉴。 前言 在日常开发工作中,有很多需求是在一个页面上显示一些图片。有时,图片的地址路径是由客户端的脚本来设置(它有可能是从数据库中获取的)。 这是Angularjs的时代,当我们想使用Angularjs来实现在页面中展示图片,我们会简单使用: . 如果我们只考虑展示,毫无疑问它没问题,但是在浏览器的控制台中会显示一个 404 (not found) 错误。 为了解决这个问题,我们需要使用ng-Src。在使用 ng-Src之前,我想给你重现一下这个错误是如何产生的 示例代码如下: 示例源码 Script.js var testApp = angular .module(“testModule”, []) .controller(“testController”, function ($scope) { var animal = { name: “CAT”, color: “White”, picture: “/images/cat.jpg”, }; $scope.animal = animal; }); Index.html Name: {{animal.name}} Color: {{animal.color}} 在上述例子 中,有一个 animal 类,它拥有三个属性: Name, Color 和Picture,且已经赋值了。使用模型绑定器,在页面上我使用了这些属性。 对于图片,我使用了 HTML标签 。 然后运行这个示例,效果如下:   然后打开浏览器的控制台,就会看到这个错误。 无法加载资源:服务器响应状态为404 (Not Found)。 那么问题来了,为什么会出现这个错误?应该如何解决? 原因- 当DOM 被解析时,会尝试从服务器获取图片。 这时,src属性上的 Angularjs 绑定表达式 {{ model }}还没有执行,所以就出现了  404 未找到的错误。 解决方案- 解决的版本就是:在图片中使用ng-Src代替src属性,使用这个指令后,请求就只会在Angular执行这个绑定表达式之后才会发出。 使用ng-Src的示例如下: Name: {{animal.name}} Color: {{animal.color}} 现在你再打开浏览器的控制台,就不会出现:404 未找到, 这是因为使用了ng-Src 。 定义 ng-Src- 这个指令覆盖了元素的src原生属性。 总结 以上就是这篇文章的全部内容,希望大家能够喜欢,如果有疑问可以留言交流。 您可能感兴趣的文章: AngularJS中指令的四种基本形式实例分析 AngularJS递归指令实现Tree View效果示例 AngularJS用户选择器指令实例分析 AngularJS创建自定义指令的方法详解 AngularJS指令用法详解 浅谈AngularJs指令之scope属性详解 AngularJS使用自定义指令替代ng-repeat的方法 AngularJS中关于ng-class指令的几种实现方式详解 AngularJS 自定义指令详解及实例代码 AngularJS封装指令方法详解 angularjs ng-src 指令 相关文章 AngularJS directive返回对象属性详解 这篇文章主要为大家纤细介绍了AngularJS directive返回对象属性的相关内容,感兴趣的小伙伴们可以参考一下 2016-03-03 AngularJS 所有版本下载地址 这篇文章主要介绍了 AngularJS 所有版本下载地址的相关资料,需要的朋友可以参考下 2016-09-09 Angular.js中上传指令ng-upload的基本使用教程 这篇文章主要给大家介绍了关于Angular.js中上传指令ng-upload的基本使用方法,文中通过示例代码介绍的非常详细,对大家具有一定的参考学习价值,需要的朋友们下面跟着小编来一起学习学习吧。 2017-07-07 通过angular CDK实现页面元素拖放的步骤详解 这篇文章主要给大家介绍了关于如何通过angular CDK实现页面元素拖放的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者使用angular具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧 2020-07-07 详解AngularJS实现表单验证 这篇文章主要介绍了AngularJS实现表单验证,客户端表单验证是AngularJS里面最酷的功能之一。AngularJS表单验证可以让你从一开始就写出一个具有交互性和可相应的现代HTML5表单,对AngularJS表单验证感兴趣的小伙伴们可以参考一下 2015-12-12 Angularjs实现mvvm式的选项卡示例代码 每位Web开发者应该都知道,选项卡是现代web网页中最常用的效果之一,所以本文重点是用angularjs这个非常火mvvm框架,实现选项卡效果。有需要的朋友们可以参考借鉴,下面来一起看看吧。 2016-09-09 Angular封装WangEditor富文本组件的方法 这篇文章主要介绍了Angular封装WangEditor富文本组件,得益于Angular的强大,封装WangEditor组件非常简单,需要的朋友可以参考下 2021-07-07 Angular 中使用 FineReport不显示报表直接打印预览 这篇文章主要介绍了Angular 中使用 FineReport不显示报表直接打印预览,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下 2019-08-08 详解angularjs获取元素以及angular.element()用法 本篇文章主要介绍了详解angularjs获取元素以及angular.element()用法 ,具有一定的参考价值,有兴趣的可以了解一下 2017-07-07 AngularJS 作用域详解及示例代码 本文主要介绍AngularJS 作用域的知识,这里整理了基础资料,和示例代码以及实现效果图,有需要的小伙伴可以参考下 2016-08-08 最新评论

前言

在日常开发工作中,有很多需求是在一个页面上显示一些图片。有时,图片的地址路径是由客户端的脚本来设置(它有可能是从数据库中获取的)。

这是Angularjs的时代,当我们想使用Angularjs来实现在页面中展示图片,我们会简单使用: <img src=”path of image”>.

如果我们只考虑展示,毫无疑问它没问题,但是在浏览器的控制台中会显示一个 404 (not found) 错误。

为了解决这个问题,我们需要使用ng-Src。在使用 ng-Src之前,我想给你重现一下这个错误是如何产生的

示例代码如下:

示例源码

Script.js

var testApp = angular 
        .module("testModule", []) 
        .controller("testController", function ($scope) { 
          var animal = { 
            name: "CAT", 
            color: "White", 
            picture: "/images/cat.jpg", 
          }; 
 
          $scope.animal = animal; 
 
        }); 

Index.html

<html ng-app="testModule"> 
<head> 
  <title></title> 
  <script src="scripts/angular.min.js"></script> 
  <script src="scripts/js/script.js"></script> 
</head> 
<body> 
   
  <div ng-controller="testController"> 
    Name: {{animal.name}} 
    <br /> 
    Color: {{animal.color}} 
    <br /> 
    <img src="{{animal.picture}}" /> 
 
  </div> 
</body> 
</html> 

在上述例子 中,有一个 animal 类,它拥有三个属性: Name, Color Picture,且已经赋值了。使用模型绑定器,在页面上我使用了这些属性。 对于图片,我使用了 <img> HTML标签 。

然后运行这个示例,效果如下:

 

然后打开浏览器的控制台,就会看到这个错误。

无法加载资源:服务器响应状态为404 (Not Found)。

那么问题来了,为什么会出现这个错误?应该如何解决?

原因- 当DOM 被解析时,会尝试从服务器获取图片。 这时,src属性上的 Angularjs 绑定表达式 {{ model }}还没有执行,所以就出现了  404 未找到的错误。

解决方案- 解决的版本就是:在图片中使用ng-Src代替src属性,使用这个指令后,请求就只会在Angular执行这个绑定表达式之后才会发出。

使用ng-Src的示例如下:

<html ng-app="testModule"> 
<head> 
  <title></title> 
  <script src="scripts/angular.min.js"></script> 
  <script src="scripts/js/script.js"></script> 
</head> 
<body> 
  <div ng-controller="testController"> 
    Name: {{animal.name}} 
    <br /> 
    Color: {{animal.color}} 
    <br /> 
    <img ng-src="{{animal.picture}}" /> 
 
  </div> 
</body> 
</html> 

现在你再打开浏览器的控制台,就不会出现:404 未找到, 这是因为使用了ng-Src

定义

ng-Src- 这个指令覆盖了<img />元素的src原生属性。

总结

以上就是这篇文章的全部内容,希望大家能够喜欢,如果有疑问可以留言交流。

您可能感兴趣的文章:

  • AngularJS中指令的四种基本形式实例分析
  • AngularJS递归指令实现Tree View效果示例
  • AngularJS用户选择器指令实例分析
  • AngularJS创建自定义指令的方法详解
  • AngularJS指令用法详解
  • 浅谈AngularJs指令之scope属性详解
  • AngularJS使用自定义指令替代ng-repeat的方法
  • AngularJS中关于ng-class指令的几种实现方式详解
  • AngularJS 自定义指令详解及实例代码
  • AngularJS封装指令方法详解
张贴在3