The wiz-image component is an HTML image container for inserting an image file of the supported format into your site layout. For more information, see Image.
Installation
To install the wiz-image component, run the following command in the root directory of your site project:
wiz install @site/wiz-image
For more information, see Install components.
Usage
TIP: As best practice, use eWizard Editor to add and edit the components.
1) Add the wiz-image component to your site and change its properties in the App.vue file:
<!--./App.vue --><template>
<wiz-root style="background: #ffffff; width: 880px" class="editable-block">
<wiz-image
id="wiz-image-7491"
:width="150"
:height="150"
src="./common/media/images/37022210-5d7b-11ec-b91a-85800ef85ec4.png"
data-asset-id="hs53s7o8gm"
:alt="$t('altText')"
></wiz-image>
</wiz-root>
</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": {
"altText": "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
Enter the image alternative text in the alt attribute value.
<wiz-image alt="My image alternative text"></wiz-image>
NOTE: To localize the image alternative text within the <i18n></i18n> tag, use the :alt="$t('altText')" variable. For more information, see Localization.
• width
Set the image width in pixels in the width attribute value.
<wiz-image :width="150"></wiz-image>
• height
Set 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 |
| String |
| The path to the image file. |
| String |
| The alternative text for the image. |
| Number |
| The image width in pixels. |
| Number |
| The image height in pixels. |
| String | N/A | The image clickable link. |
| String |
| The image alignment on the page. Other possible values are: |
For more information, see Component properties.