wiz-image

Use the wiz-image component to add images of supported formats to your e-Detailer. For more information, see Image.

Learn more about components

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

Usage

To add the wiz-image component to your slide and change its properties, in the ./slides/default/index.vue file:

1. Add the <wiz-image></wiz-image> tag to your slide template.

   <!--./slides/default/index.vue -->
   
   <template>
   <wiz-slide class="editable-block">
     <wiz-image id="wiz-image-0547" class="default" data-asset-id="hlb3gef8ut" src="./media/images/f6194d90-8f03-11ec-96c2-ea6c057b1b2f.jpg" :alt="'An image'"></wiz-image>
   </wiz-slide>
   </template>

   The id and class attributes are 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 <i18n></i18n> localization tag.

   <!--./slides/default/index.vue -->
   
   <i18n>
   {
     "eng": {
       "altText": "<span style='line-height:30px;font-size:30px;'>My image</span>"
     }
   }
   </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:

• component-name

  Change the component label displayed on the Properties tab in eWizard Editor.

  <wiz-image component-name="My image"></wiz-image>

• src

  Change the image path in the src attribute value.

  <wiz-image src="./common/media/images/f6194d90-8f03-11ec-96c2-ea6c057b1b2f.jpg"></wiz-image>

  The ./common/media/images path is the default one for images. You can rename the image and provide a new path. To change the default path, edit the images property in the ./.ewizard/settings.json file of your project.

• alt

  Change the image alternative text in the alt attribute.

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

  To localize the image alternative text within the <i18n></i18n> tag, use the :alt="$t('altText')" variable. For more information, see Localization.

Properties

The following properties are available:

Property	Type	Default value	Description
alt	string	Image	The text displayed on the e-Detailer slide if the image fails to load.
componentName	string	Image	The text label displayed in eWizard Editor.
src	string	./media/images/default-image.png	The path or link to the image file.