Skip to content
Last update: February 12, 2024


The image component displays a single image.


Include the vc-image component in your Vue application, providing theming and enhanced functionality to your image inputs.

Image is created with src property.

Create a basic image as follows:

    <vc-image :src="https://image-url"></vc-image>

To start using all the available image properties, specify the vc-image component when creating the schema. For example:

    id: "imageId",
    component: "vc-image",
    property: "imagePropertyWithUrl",
    size: "xl",
    background: "contain",
    bordered: true

Image API

API empowers you to create dynamic and interactive image components to customize its appearance and behavior.

Basic Vue

You can easily incorporate the vc-image component into your Vue applications using simple templates.


To customize the appearance and behavior of images, use the following props:

Property and Type Description
aspect {"1x1"}, {"16x9"}, {"4x3"}, {"3x2"} Image aspect ratio. Default: "1x1"
rounded {boolean} Whether the image is rounded or not.
bordered {boolean} Whether the image is bordered or not.
clickable {boolean} Whether the image has preview on click or not. Default: false
src {string} The source URL of the image.
size {"auto"}, {"xs"}, {"s"}, {"m"}, {"l"}, {"xl"}, {"xxl"} Image size. Default: auto
background {"cover"}, {"contain"}, {"auto"} Size of the element's background image. Accepts auto, cover, contain CSS background-size value. Default: cover


To interact with the vc-image component, use the emitted events. The click event, triggered when the button is clicked, allows you to implement dynamic behaviors and responses within your application:

Name Parameters ReturnType Description
click void void Emitted when the image is clicked.

Dynamic Views

To dynamically integrate the vc-image component into your views, use the schema interface:

interface ImageSchema {
    id: string;
    component: "vc-image";
    property: string;
    aspect?: "1x1" | "16x9" | "4x3" | "3x2";
    background?: "auto" | "cover" | "contain";
    size?: "auto" | "xs" | "s" | "m" | "l" | "xl" | "xxl";
    rounded?: boolean;
    bordered?: boolean;
    clickable?: boolean;
    visibility?: {
        method: string;
    update?: {
        method: string;
    horizontalSeparator?: boolean;

To incorporate the image into your dynamic applications, define the following properties:

Property and Type Description
id {string} The unique Id for the vc-image component.
component {vc-image} Component utilized in the schema.
property {string} Name of the property used for binding the image URL value to blade data. Supports deep nested properties, such as property[1].myProperty.
Additionally, you have the flexibility to bind computed property that returns a value. Computed property should be defined in the blade scope.
aspect {string} Image aspect ratio. Default: 1x1.
background {string} Size of the element's background image. Accepts CSS background-size values like auto, cover, or contain. Default: cover.
size {string} Image size. Default: auto.
rounded {boolean} Specification of whether the image should have rounded corners.
bordered {boolean} Specification of whether the image should have a border.
clickable {boolean} Specification of whether the image has a preview on click. Default: false.
visibility {{method: string}} Definition of the visibility state for the component, allowing you to hide the image based on certain conditions. The method or variable should be defined in the blade scope and return a boolean value.
update {{method: string}} Specification of the method to call when the image URL value is updated. It gets changed value, schema property name and field internal context as arguments. The method should be defined in the blade scope.
horizontalSeparator {boolean} Adds a horizontal separator line after the component.