D.School Component Library

Image 

<img class="o-image" loading="lazy" srcset="https://picsum.photos/768/576 768w, https://picsum.photos/960/720 960w" src="https://picsum.photos/480/360" alt="Alt text" />
 
{% set base_class = image.base_class|default('o-image') %}
{% if image.src %}
  <img class="{{ bem(base_class, image.element, image.modifiers, image.extra) }}{{ image.lazy == false ? ' no-lazy' }}"
    {% if image.lazy != false %}
      loading="lazy"
    {% endif %}
    {% if image.srcset %}
      srcset="{{ image.srcset }}"
    {% endif %}
    {% if image.sizes %}
      sizes="{{ image.sizes }}"
    {% endif %}
    src="{{ image.src }}"
    alt="{{ image.alt ? image.alt : "Image" }}"
    {% if image.title %}
      title="{{ image.title }}"
    {% endif %}
    {{ attributes(image.attributes) }}
  />
{% endif %}
 
{
  "image": {
    "srcset": "https://picsum.photos/768/576 768w, https://picsum.photos/960/720 960w",
    "src": "https://picsum.photos/480/360",
    "alt": "Alt text"
  }
}

No notes defined.