详解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 相关文章推荐
js 日期转换成中文格式的函数
Jul 07 Javascript
js中的preventDefault与stopPropagation详解
Jan 29 Javascript
js delete 用法(删除对象属性及变量)
Aug 24 Javascript
jQuery中odd选择器的定义和用法
Dec 23 Javascript
jQuery中contents()方法用法实例
Jan 08 Javascript
AngularJS 作用域详解及示例代码
Aug 17 Javascript
微信小程序 封装http请求实例详解
Jan 16 Javascript
react-native-fs实现文件下载、文本存储的示例代码
Sep 22 Javascript
详解基于 Nuxt 的 Vue.js 服务端渲染实践
Oct 24 Javascript
Node.JS在命令行中检查Chrome浏览器是否安装并打开指定网址
May 21 Javascript
微信小程序中的列表切换功能实例代码详解
Jun 09 Javascript
利用前端HTML+CSS+JS开发简单的TODOLIST功能(记事本)
Apr 13 Javascript
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
Laravel框架路由配置总结、设置技巧大全
2014/09/03 PHP
PHP编译configure时常见错误的总结
2017/08/17 PHP
PHP实现广度优先搜索算法(BFS,Broad First Search)详解
2017/09/16 PHP
JavaScript 字符串与数组转换函数[不用split与join]
2009/12/13 Javascript
JavaScript 学习笔记(十六) js事件
2010/02/01 Javascript
在JavaScript并非所有的一切都是对象
2013/04/11 Javascript
js的参数有长度限制吗?发现不能超过2083个字符
2014/04/20 Javascript
javascript格式化json显示实例分析
2015/04/21 Javascript
浅谈JavaScript字符串拼接
2015/06/25 Javascript
JS简单限制textarea内输入字符数量的方法
2015/10/14 Javascript
js 连续赋值的简单实现
2016/06/13 Javascript
微信小程序 连续旋转动画(this.animation.rotate)详解
2017/04/07 Javascript
Angular4实现动态添加删除表单输入框功能
2017/08/11 Javascript
vue.js  父向子组件传参的实例代码
2017/10/29 Javascript
浅谈Angular文字折叠展开组件的原理分析
2017/11/24 Javascript
Webpack打包字体font-awesome的方法示例
2018/04/26 Javascript
Vue.js项目中管理每个页面的头部标签的两种方法
2018/06/25 Javascript
JS/jQuery实现简单的开关灯效果【案例】
2019/02/19 jQuery
Vue 页面权限控制和登陆验证功能的实例代码
2019/06/20 Javascript
JavaScript实现省市联动效果
2019/11/22 Javascript
Js参数RSA加密传输之jsencrypt.js的使用
2020/02/07 Javascript
vue相同路由跳转强制刷新该路由组件操作
2020/08/05 Javascript
[05:09]第二届DOTA2亚洲邀请赛决赛日比赛集锦:iG 3:0 OG夺冠
2017/04/05 DOTA
[51:15]完美世界DOTA2联赛PWL S2 PXG vs Magma 第一场 11.21
2020/11/24 DOTA
Python补齐字符串长度的实例
2018/11/15 Python
python PrettyTable模块的安装与简单应用
2019/01/11 Python
python中如何写类
2020/06/29 Python
CSS3中使用RGBA设置透明度的示例
2015/08/04 HTML / CSS
幼师自荐信范文
2013/10/06 职场文书
《宿建德江》教学反思
2014/04/23 职场文书
四风对照检查材料范文
2014/09/27 职场文书
2015年出纳年终工作总结
2015/05/14 职场文书
2016大学军训通讯稿
2015/11/25 职场文书
mysql知识点整理
2021/04/05 MySQL
python本地文件服务器实例教程
2021/05/02 Python
Ajax实现异步加载数据
2021/11/17 Javascript