详解AngularJS中ng-src指令的使用


Posted in Javascript onSeptember 07, 2016

前言

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

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

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

详解AngularJS中ng-src指令的使用

为了解决这个问题,我们需要使用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标签 。

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

详解AngularJS中ng-src指令的使用 

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

无法加载资源:服务器响应状态为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原生属性。

总结

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

Javascript 相关文章推荐
Jquery ajaxStart()与ajaxStop()方法(实例讲解)
Dec 18 Javascript
javascript学习笔记(二)数组和对象部分
Sep 30 Javascript
关于Javascript加载执行优化的研究报告
Dec 16 Javascript
Node.js中的process.nextTick使用实例
Jun 25 Javascript
JS实现下拉菜单列表与登录注册弹窗效果
Aug 10 Javascript
基于vue开发的在线付费课程应用过程
Jan 25 Javascript
浅谈手写node可读流之流动模式
Jun 01 Javascript
vue结合element-ui使用示例
Jan 24 Javascript
AJAX在JQuery中的应用详解
Jan 30 jQuery
小程序云开发获取不到数据库记录的解决方法
May 18 Javascript
Vue事件修饰符native、self示例详解
Jul 09 Javascript
vue基于Teleport实现Modal组件
May 31 Vue.js
AngularJS实现按钮提示与点击变色效果
Sep 07 #Javascript
JS实现简单易用的手机端浮动窗口显示效果
Sep 07 #Javascript
利用Angularjs实现幻灯片效果
Sep 07 #Javascript
轻松掌握JavaScript状态模式
Sep 07 #Javascript
JS简单实现tab切换效果的多窗口显示功能
Sep 07 #Javascript
JS实现的幻灯片切换显示效果
Sep 07 #Javascript
javascript宿主对象之window.navigator详解
Sep 07 #Javascript
You might like
PHP中使用foreach和引用导致程序BUG的问题介绍
2012/09/05 PHP
分割GBK中文遭遇乱码的解决方法
2013/08/09 PHP
php对二维数组按指定键值key排序示例代码
2013/11/26 PHP
php按百分比生成缩略图的代码分享
2014/05/10 PHP
PHP中的gzcompress、gzdeflate、gzencode函数详解
2014/07/29 PHP
smarty模板引擎中变量及变量修饰器用法实例
2015/01/22 PHP
PHP函数超时处理方法
2016/02/14 PHP
Yii2框架配置文件(Application属性)与调试技巧实例分析
2019/05/27 PHP
thinkPHP+mysql+ajax实现的仿百度一下即时搜索效果详解
2019/07/15 PHP
IE中直接运行显示当前网页中的图片 推荐
2006/08/31 Javascript
JavaScript 对象成员的可见性说明
2009/10/16 Javascript
JS 实现双色表格实现代码
2009/11/24 Javascript
单击浏览器右上角的X关闭窗口弹出提示的小例子
2013/06/12 Javascript
JS往数组中添加项性能分析
2015/02/25 Javascript
JavaScript中的setMilliseconds()方法使用详解
2015/06/11 Javascript
浅谈js数据类型判断与数组判断
2016/08/29 Javascript
Angular2从搭建环境到开发步骤详解
2016/10/17 Javascript
学习vue.js中class与style绑定
2016/12/03 Javascript
AngularJS中下拉框的高级用法示例
2017/10/11 Javascript
angular json对象push到数组中的方法
2018/02/27 Javascript
vue中可编辑树状表格的实现代码
2020/10/31 Javascript
[00:14]PWL:老朋友Mushi拍VLOG与中国玩家问好
2020/11/04 DOTA
python 截取 取出一部分的字符串方法
2017/03/01 Python
Python文本统计功能之西游记用字统计操作示例
2018/05/07 Python
修复 Django migration 时遇到的问题解决
2018/06/14 Python
实例详解Python装饰器与闭包
2019/07/29 Python
Python实现随机取一个矩阵数组的某几行
2019/11/26 Python
css图标制作教程制作云图标
2014/01/19 HTML / CSS
CSS3 animation实现简易幻灯片轮播特效
2016/09/27 HTML / CSS
使用phonegap获取位置信息的实现方法
2017/03/31 HTML / CSS
英国街头品牌:Bee Inspired Clothing
2018/02/12 全球购物
拓展训练激励口号
2014/06/17 职场文书
土建专业毕业生自荐书
2014/07/04 职场文书
创建绿色社区汇报材料
2014/08/22 职场文书
电子商务实训报告总结
2014/11/05 职场文书
人代会简报
2015/07/21 职场文书