The image tag helper extends a standard img tag with attributes based on an image reference in the content.

Usage

The following attributes can be added to the img tag. The re-src is the only attribute that is required for any of the other attributes to work.

  • rx-src - renders the correct image source URL on the tag based on the file reference. This must be either an object of type Mediaor an instance of a content model that implements IContentType in which case the primary media property on the content will be selected if multiple file properties exist on the content model. If the source is empty, the image tag output will be suppressed completely.
  • rx-width - sets the width for server-side resizing of the image. This does not render a width attribute or CSS style on the tag.
  • rx-height - sets the height for server-side resizing of the image. This does not render a height attribute or CSS style on the tag.
  • rx-mode - sets the server-side resize mode, used in combination with the width, height, or both. The following resize modes are available:
    • ResizeMode.Crop - crops the image to the provided width and height, possibly changing the aspect ratio of the image. The image is not stretched if the provided width or height exceeds the original image dimensions.
    • ResizeMode.Scale - scales the image to the provided width and/or height. The image is stretched if the provided width and/or height exceed the original image dimensions. If only width or height is provided, the original aspect ratio is maintained.
    • ResizeMode.Pad - resizes the image to the provided width and height. The image is padded to match the new aspect ratio. The padded background is transparent for image formats with alpha channel, or white otherwise. The background color can also be set explicitly with rx-bg-color.
    • ResizeMode.Max - resizes the image to the maximum possible value in each direction while maintaining the original aspect ratio.
  • rx-bg-color - sets the background color when using ResizeMode.Pad; must be a hexadecimal RGB value, with or without hash (#).
  • rx-quality - sets a quality from 1 to 100 for compressible image formats. If not set, the default quality will be used.
  • rx-format - sets the output image format that images will be converted to. Can be png, jpeg, gif, bmp, webp, or tiff. Please note that not all image processors support all image formats.

Examples

@{
    // MainImage is assumed to be an asset content model containing an image file
    var image = Model.Content.MainImage;
}
<div>
    <img rx-src="image" rx-width="400" rx-height="300" rx-mode="ResizeMode.Crop" alt="@image?.AlternateText" />

    <img rx-src="image?.File" rx-width="480" rx-mode="ResizeMode.Scale" rx-format="jpeg" rx-quality="80" style="width: 240px;" />
</div>
In this article