wiz-image component in emails | Viseven Help Center

The wiz-image component is an HTML image container for inserting an image file of the supported format into your email layout. For more information, see Image.

Installation

To install the wiz-image component, run the following command in your email project root directory:

wiz install @email/wiz-image

For more information, see Install components.

Usage

NOTE: As best practice, use eWizard Editor to add and edit the components.

1) Add the wiz-image component to your email and change its properties in the App.vue file:

<!--./App.vue --><template>
<div>
<wiz-root align="center" style="background: #ffffff; width: 700px;">
<wiz-image
id="wiz-image-b7e1"
:link="'https://viseven.com'"
:width="90"
:height="90"
alt="Image"
src="./common/media/images/37022210-5d7b-11ec-b91a-85800ef85ec4.png"
data-asset-id="xtqic96ryf"
></wiz-image>
</wiz-root>
</div>
</template>

NOTE: The id attribute is required for the correct display of the component styles in eWizard Editor.

The data-asset-id attribute is required for the Veeva Vault modules in the assets.json file. For more information, see Veeva Vault publish settings.

2) Change the image alternative (alt) text in the localization <i18n></i18n> tag.

<!--./App.vue --><i18n>
{
"eng": {
"image_alt_1": "Viseven",
}
}
</i18n>

For more information, see Localization.

Attributes

You can change the wiz-image component appearance and behavior using the following attributes within the <wiz-image></wiz-image> tag.

• src

Change the image path in the src attribute value.

<wiz-image src="./common/media/images/37022210-5d7b-11ec-b91a-85800ef85ec4.png"></wiz-image>

NOTE: The ./common/media/images path is the default path for images. You can rename the image and provide a new path.

• alt

Change the image alternative (alt) text in the alt attribute value.

<wiz-image alt="My image alternative text"></wiz-image>

NOTE: If you want the image alternative text to be localizable within the <i18n></i18n> tag, use the :alt="$t('image_alt_1')" variable. For more information, see Localization.

• width

Change the image width in pixels in the width attribute value.

<wiz-image :width="150"></wiz-image>

• height

Change the image height in pixels in the height attribute value.

<wiz-image :height="150"></wiz-image>

• link

Change the image link in the link attribute value.

<wiz-image :link="'https://viseven.com/'"></wiz-image>

• align

Change the image alignment on the page in the align attribute value.

<wiz-image align="left"></wiz-image>

Properties

The wiz-image component has the following properties:

Property	Type	Default	Description
`src`	String	`./node_modules/wiz-image/` `media/images/placeholder.png`	The path to the image file.
`alt`	String	`Image`	The alternative text for the image.
`width`	Number	`0`	The image width in pixels.
`height`	Number	`0`	The image height in pixels.
`link`	String	N/A	The image clickable link.
`align`	String	`center`	The image alignment on the page. Other possible values are: `left` and `right`.

For more information, see Component properties.