<ev:img />

Renders an HTML <img> tag, but it's been designed for use in conjunction with any file in your theme or an account content folder and does a whole load of magical stuff to help with various issues.

<ev:img src="~/theme/images/myimage.png" />

The src in this example resolves to the current theme by using the ~/theme URL, which means you don't have to worry if the theme is renamed. 

Attributes

Whilst the images you include in your theme can be carefully honed to your design, that's not so clear with content within an account. So we have a selection of attributes to help you out.

alt

An empty alt attribute is added to <ev:img> by default.

fallback

An image to fall back to if the preferred src file does not exist or is empty - ideally used for database situations where the image may be missing. The url provided will be parsed by the URL parser and accepts URL helpers such as ~/theme.

<ev:img src="{{ product.imageUrl }}" fallback="~/theme/images/placeholder.png" />
height

Will resize the image provided to the given height using the Image Sizes & Resizing rules. If height is not supplied the image will be sized according to the width and height will be calculated according to original maintaining aspect ratio. If no width or height attributes are supplied the file will be rendered at its original size. 

maxheight

You should use the maxheight attribute in conjunction with width to set an image to a preferred width. Width is recalculated if the resized height maintaining aspect ratio is greater than the maxheight.

maxwidth

You should use the maxwidth attribute in conjunction with height to set an image to a preferred height. Height is recalculated if the resized width maintaining aspect ratio is greater than the maxwidth.

src

The original file url (this should be the original image url NOT using the Image Sizes & Resizing rules). The url provided will be parsed by the URL parser and accepts URL helpers such as ~/theme. 

The src of the file will alter depending on whether you are in development mode or in production mode. For example, the following:

<ev:img src="~/content/images/myimage.png" width="100" />

will render in development mode similar to:

<img src="/portal/public/1/content/images/100x_/myimage.png?v=123456" />

and will render in production mode similar to:

<img src="//cdn.evance.it/portal/public/1/content/images/100x_/myimage.png?v=123456" />

This means you do not need to worry about converting asset URLs either from content or theme into CDN URLs as they are done for you using this tag. 

width

Will resize the image provided to the given width using the Image Sizes & Resizing rules.