AngularJS ng-src 指令



  • 定义和用法

    ng-src 指令将覆盖 <img> 元素的原始 src 属性。
    如果 src 值中包含 AngularJS 代码,则应使用 ng-src 指令而不是 src
    ng-src 指令可确保在 AngularJS 评估代码之前图像不会显示错误。
  • 语法

    <img ng-src="string"></img>
    
    仅由<img>元素支持该指令
  • 参数

    参数 必需的 描述
    string 字符串值或产生字符串的表达式。
  • 示例

    下例演示了添加一个图像,其中AngularJS对src进行评估:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>欢迎来到蝴蝶教程</title>
    <script src="//cdn.bootcss.com/angular.js/1.5.8/angular.min.js"></script>
    </head>
    <body ng-app="">
          <div ng-init="myVar = '/wp-content/uploads/2018/09/angular.png'">
                <h1>Angular</h1>
                <img ng-src="{{myVar}}">
          </div> 
          <div>该示例可以使用原始的src属性,但是在值中包含AngularJS代码的情况下,最好改用ng-src属性。</div> 
    </body>
    </html>