wiz-image component in e-Detailers

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

Installation

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

wiz install @edetailer/wiz-image

For more information, see Install components.

Usage

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

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>

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

Properties

The wiz-image component has the following properties:

Property	Type	Default	Description
`componentName`	String	`Image`	The component label displayed on the Properties tab in eWizard Editor
`src`	String	`./media/images/default-image.png`	The path to the image file
`alt`	String	`Image`	The alternative text for the image

For more information, see Component properties.