ECL 图片组件

npm 软件包 : @ecl/picture

npm install --save @ecl/picture

参数

• "画面" (对象)(默认: ):
  • "img"(对象)(默认:qq):
    • "src" (字符串)(默认:") 图像路径
    • "alt" (字符串)(默认:") 图像的替代文本
  • “ image anchor” (字符串)(默认: “ center” ) 剪接时图像的位置 。 可以是任何允许的值 对象位置
  • "debug 位置":(boolean) (默认:虚假) 在渲染的图像中显示焦点所在的标记
  • "源" (阵列)(默认: []) 响应图像源; 格式 :
    • "src" (字符串)(默认为:") 源图像路径
    • "media" (字符串)(默认为:") Media 条件;一个断点名 ('x','s','m','l','xl') 或 CSS 媒体字符串
    • 类型 (字符串)(默认为:") 源的 MIME 类型
• "懒" (boolean) (默认:虚假) 懒惰地装入图片
• "动物" (boolean) (默认:虚假) 悬浮时应用缩放动画
• "超级" (字符串)(默认为:") 根上的额外类 <picture> 标签
• "外相 图像 类" (字符串)(默认:") <img> 标签
• “外部属性” (阵列) (默认: []) 附加属性于 <picture> 标签
  • 名称 (字符串) 属性名称, 如“ 数据测试 ”
  • 值 (字符串) 属性值, 如 : “ data- test-1 ”

示例

{% include '@ecl/picture/picture.html.twig' with {
  picture: {
    img: {
      src: 'https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg',
      alt: 'Image alternative text',
    },
    sources: [
      {
        src: 'https://inno-ecl.s3.amazonaws.com/media/examples/example-image6.jpg',
        media: '(min-width: 90rem)'
      },
      {
        src: 'https://inno-ecl.s3.amazonaws.com/media/examples/example-image5.jpg',
        media: 'xl',
      },
      {
        src: 'https://inno-ecl.s3.amazonaws.com/media/examples/example-image4.jpg',
        media: 'l',
      },
      {
        src: 'https://inno-ecl.s3.amazonaws.com/media/examples/example-image3.jpg',
        media: 'm',
      },
      {
        src: 'https://inno-ecl.s3.amazonaws.com/media/examples/example-image2.jpg',
        media: 's',
      },
    ],
  },
} %}