zoukankan      html  css  js  c++  java
  • 48.AngularJS ng-src 指令

    转自:https://www.cnblogs.com/best/tag/Angular/

    1.

     1 <!DOCTYPE html>
     2 <html>
     3 <head>
     4 <meta charset="utf-8">
     5 <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
     6 </head>
     7 <body ng-app="">
     8 
     9 <div ng-init="myVar = 'http://www.runoob.com/wp-content/uploads/2014/06/angular.jpg'">
    10 <h1>Angular</h1>
    11 <img ng-src="{{myVar}}">
    12 </div>
    13 
    14 <p>该实例可以使用原生的 src 输出,但是使用 AngularJS 代码插入值,使用 ng-src 属性更好。</p>
    15 
    16 </body>
    17 </html>

    2.

    定义和用法

    ng-src 指令覆盖了 <img> 元素的 src 属性。

    如果你使用了 AngularJS 代码设置图片地址,请使用 ng-src 指令替代 src 属性。

    ng-src 指令确保的 AngularJS 代码执行前不显示图片。


    语法

    <img ng-src="string"></img>

    <img> 元素支持该属性。


    参数值

    描述
    string 表达式返回的字符串。

    <!DOCTYPE html><html><head><meta charset="utf-8"><script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script></head><body ng-app="">
    <div ng-init="myVar = 'http://www.runoob.com/wp-content/uploads/2014/06/angular.jpg'"><h1>Angular</h1><img ng-src="{{myVar}}"></div>
    <p>该实例可以使用原生的 src 输出,但是使用 AngularJS 代码插入值,使用 ng-src 属性更好。</p>
    </body></html>

  • 相关阅读:
    WebPlayer9电影整站系统第三方电影批量添加工具
    Delphi执行SQL提示“不正常地定义参数对象”,“提供了不一致或不完整的信息”错误
    IIS控制大全
    Redis慢查询日志
    Redis短结构
    分布式AKF拆分原则
    Redis分片
    Redis的bitmap从基础到业务
    什么是CAP?
    Redis面试题
  • 原文地址:https://www.cnblogs.com/sharpest/p/8243350.html
Copyright © 2011-2022 走看看