Image

wiz-image is a cross-channel image component for displaying images in emails and e-Detailers. It supports responsive layouts, clickable image links, and automatic image sizing with fallback to default placeholder images.

The wiz-image component includes responsive behavior for mobile devices (screens up to 480px width), ensuring images remain properly sized and accessible on smaller screens.

The cross-channel image component has the following key features:

• Responsive layout with auto-fit capabilities.

• Clickable image links with URL navigation.

• Image sizing and alignment control.

• Accessibility support through alt text.

• Email table rendering for optimal client compatibility.

• Marketing automation link tracking.

Installation

The wiz-image component is part of the eWizard.js component library. To install it to your project, run the following command in the terminal:

wiz install @component/wiz-image

Then, import the component in your Vue file:

import wizImage from '@component/wiz-image';

export default {
  components: {
    wizImage
  }
}

Register the component globally in your application or import it in your Vue template.

Properties

The wiz-image component has the following properties:

Property	Type	Default	Description
src	String	'./media/images/default-image.jpg'	The image source URL or path.
alt	String	'Image'	Alternative text for the image for accessibility.
width	Number	0	Image width in pixels (0 = auto).
height	Number	0	Image height in pixels (0 = auto).
align	String	'center'	Image alignment: 'center', 'left', or 'right'.
link	String	''	URL to navigate to when the image is clicked.
dataMsysLinkname	String	''	Data attribute for marketing automation link tracking.
autoFitWidth	Boolean	true	Automatically fit image width to container (non-email channels).
autoFitHeight	Boolean	true	Automatically fit image height to container (non-email channels).
draggable	Boolean	false	Allow the image to be dragged on the content item layout in eWizard Editor.
componentName	String	'Image'	Internal component name identifier.

Custom events

The wiz-image component doesn't emit any custom events. The component handles click interactions through the optional link property, which navigates to the specified URL when the image is clicked.

Channel-specific behavior

The cross-channel image component adapts its rendering and functionality based on the content item context.

• Images are rendered as standard HTML <div> elements.

• Supports object-fit CSS for image scaling.

• Respects the autoFitWidth and autoFitHeight properties for flexible layout.

• Images are rendered within a table structure for optimal email client compatibility.

• Automatically applies the wiz-link-wrapper component when a link is provided.

• Supports Microsoft Dynamics marketing automation tracking via dataMsysLinkname.

Basic usage example

<wiz-image
  :width="200"
  :height="200"
  align="center"
  src="image.png"
  alt="image alt"
></wiz-image>