wiz-plain-image

wiz-plain-image is a reusable and lightweight Vue.js component designed to display images with optional links and customizable properties like styles, classes, and dimensions. You can wrap this component in a link and configure it for interactive image maps.

Learn more about components

• Import and registration
• Property and file types
• Configuration
• Components in eWizard Editor

Usage

Markup:

<wiz-plain-image></wiz-plain-image>

To customize the image and link with additional classes, styles, and dimensions:

<wiz-plain-image 
  img-src="https://example.com/image.jpg"
  img-alt="Custom Styled Image"
  img-class="custom-img-class"
  img-style="border-radius: 8px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);"
  img-width="300px"
  link-href="https://example.com"
  link-class="custom-link-class"
  link-style="text-decoration: none; outline: none;"
/>

Properties

The following properties are available:

Property	Type	Default value	Description
imgAlt	string	N/A	An alternative text displayed on the email layout if the image fails to load.
imgSrc	string	Placeholder image	A URL or path to the image file. Defaults to a placeholder if not provided.
imgClass	string	N/A	CSS class name(s) for the "<img>" tag.
imgStyle	string	N/A	Inline CSS styles to apply to the "<img>" tag.
imgWidth	string	N/A	The width for the "<img>" tag in pixels or percent.
linkClass	string	N/A	CSS class name(s) for the "<a>" tag, if a link is used.
linkHref	string	N/A	A URL for wrapping the image in a clickable link.
linkStyle	string	"outline:none"	Inline CSS styles to apply to the "<a>" tag, if a link is used.
usermap	string	N/A	The attribute for defining client-side image maps.