AngularJS ng-srcset 指令

  • 定义和用法

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

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

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

    下例演示了添加一个图像,其中AngularJS对srcset进行评估:
    <!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-srcset="{{myVar}}">
          </div> 
          <div>该示例可以使用原始的ng-srcset属性,但是在值中包含AngularJS代码的情况下,最好改用srcset属性。</div> 
    </body>
    </html>
    
    尝试一下