wiz-image

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.

Learn more about components

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

Usage

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>

   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>

  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>

  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 following properties are available:

Property	Type	Default value	Description
align	string	center	The image alignment on the email layout. One of: "center", "left", "right".
alt	string	Image	The text displayed in the email if the image fails to load.
height	number	0	The image height in pixels.
link	string	N/A	A URL or link target for the image.
src	string	./node_modules/wiz-image/ media/images/placeholder.png	The path or link to the image file.
width	number	0	The width of the image in pixels.