Generates HTML IMG tag for given image path or object (e.g. Asset, Image). Site root prefix will be added automatically. Additional attributes may be supplied.

{% image 'images/image_path.png' %}
#=> <img src="//site_root/images/image_path.png" />
{% image object %}
#=> <img src="//site_root/photos/photo_path.jpg" srcset="..." sizes="..." />

If an image tag with the srcset, sizes and src variables in the data attributes is needed, use an image_data tag instead.

Available attributes:

  • alt
    • the alt-tag for the image. If it doesn't exist, the default alt tag is taken from the name of the file
  • title
    • the title for the image.
  • height
    • the height of the image
  • width
    • the width of the image
  • class
    • the "class" attribute for the image tag
  • loading
    • to add lazy-loading ("lazy", "eager" etc.). Defaults to nil
  • style
    • the "style" attribute of the image tag
  • data-* or data_*
    • data attributes
  • sizes
    • user-defined sizes attribute
  • srcset
    • user-defined srcset attribute (either as a string or an array)
  • with_srcset
    • true or false, defaults to true. If the user uses an object for generating the image tag and doesn't want the srcset to be automatically generated, this can be given a value of false.
  • target_width
    • user-defined target width for an image (e.g. if the image doesn't need to be wider than a certain value)
{% image 'image_path.png' alt="Image" class="my-class" data-style="beautiful" %} #=> <img src="/site_root/image_path.png" alt="Image" class="my-class" data-style="beautiful" />