详解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 相关文章推荐
html向js方法传递参数具体实现
Aug 08 Javascript
javascript:window.open弹出窗口的位置问题
Mar 18 Javascript
捕获和分析JavaScript Error的方法
Mar 25 Javascript
EasyUI中datagrid在ie下reload失败解决方案
Mar 09 Javascript
基于HTML+CSS+JS实现增加删除修改tab导航特效代码
Aug 05 Javascript
用JS动态设置CSS样式常见方法小结(推荐)
Nov 10 Javascript
BootStrap给table表格的每一行添加一个按钮事件
Sep 07 Javascript
vue与原生app的对接交互的方法(混合开发)
Nov 28 Javascript
javascript中this的用法实践分析
Jul 29 Javascript
Vue中错误图片的处理的实现代码
Nov 07 Javascript
vuex管理状态 刷新页面保持不被清空的解决方案
Nov 11 Javascript
Vue3 Composition API的使用简介
Mar 29 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新手上路(六)
2006/10/09 PHP
利用ThinkPHP内置的ThinkAjax实现异步传输技术的实现方法
2011/12/19 PHP
关于IIS php调用com组件的权限问题
2012/01/11 PHP
PHP实现发送微博消息功能完整示例
2019/12/04 PHP
网页中返回顶部代码(多种方法)另附注释说明
2013/04/24 Javascript
javascript进行四舍五入方法汇总
2014/12/16 Javascript
Python脚本后台运行的几种方式
2015/03/09 Javascript
BootStrap3学习笔记(一)之网格系统
2016/05/20 Javascript
jQuery实现div横向拖拽排序的简单实例
2016/07/13 Javascript
JS清除字符串中重复值的实现方法
2016/08/03 Javascript
JavaScript实现多栏目切换效果
2016/12/12 Javascript
jQuery Easyui datagrid editor为combobox时指定数据源实例
2016/12/19 Javascript
canvas红包照片实例分享
2017/02/28 Javascript
three.js实现3D影院的原理的代码分析
2017/12/18 Javascript
JS中判断字符串存在和非空的方法
2018/09/12 Javascript
详解JavaScript的变量
2019/04/04 Javascript
微信小程序基于canvas渐变实现的彩虹效果示例
2019/05/03 Javascript
使用vuex存储用户信息到localStorage的实例
2019/11/11 Javascript
JavaScript实现简单日历效果
2020/09/11 Javascript
antd中table展开行默认展示,且不需要前边的加号操作
2020/11/02 Javascript
Python的Bottle框架中获取制定cookie的教程
2015/04/24 Python
python 网络编程常用代码段
2016/08/28 Python
Python学习小技巧总结
2018/06/10 Python
python and or用法详解
2019/06/26 Python
tensorflow实现残差网络方式(mnist数据集)
2020/05/26 Python
Django实现任意文件上传(最简单的方法)
2020/06/03 Python
Django启动时找不到mysqlclient问题解决方案
2020/11/11 Python
HTML5本地数据库基础操作详解
2016/04/26 HTML / CSS
印度手工编织服装和家居用品商店:Fabindi
2019/10/07 全球购物
大学毕业生简单自荐信
2013/11/05 职场文书
医学院校毕业生自荐信范文
2014/01/01 职场文书
学校安全责任书
2014/04/14 职场文书
综治工作汇报材料
2014/10/27 职场文书
详解如何使用Node.js实现热重载页面
2021/05/06 Javascript
python3.7.2 tkinter entry框限定输入数字的操作
2021/05/22 Python
Python爬虫入门案例之爬取二手房源数据
2021/10/16 Python