image

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" />