wiz-image

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.

Learn more about components

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

Usage

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>

   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>

  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>

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

Property	Type	Default value	Description
align	string	center	Defines how the image is aligned on the site layout. One of: "center", "left", "right".
alt	string	Image	The text displayed on the site page 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 image width in pixels.