Banner Images Component

Overview

The Banner Images Component allows categories such as Event, Product, Coupon, and Wedding QR Codes to display up to three banner images.
Each banner image must be provided as a valid HTTPS URL linking to an image file (.png, .jpg, .jpeg, .svg, or .gif). This component enforces file type and count limits to maintain layout consistency and prevent performance issues from oversized or unsupported media.

Properties

Property	Type	Required	Description
images	`array<object>`	✅ Yes	List of image objects to display as banners. Supports up to 3 images.

🖼️ Image Object

Sub-Property	Type	Required	Description
url	`string`	✅ Yes	Direct HTTPS link to the image file. Must end with `.png`, `.jpeg`, `.jpg`, `.svg`, or `.gif`.

Validation Rules

A maximum of 3 images are allowed.
Image URLs must begin with https:// or http://.
Supported file extensions: .png, .jpeg, .jpg, .svg, .gif.
Invalid or non-image URLs will result in schema validation errors.

Used In Categories

This component is used in the following QR Code categories:

Example Schema

{
  "$schema": "http://json-schema.org/draft-07/schema#",
  "definitions": {},
  "title": "Banner images component",
  "description": "Validate banner images component",
  "type": "object",
  "required": [
    "images"
  ],
  "additionalProperties": false,
  "properties": {
    "images": {
      "type": "array",
      "additionalProperties": false,
      "maxItems": 3,
      "$comment": "Allows 3 items in the list",
      "items": {
        "type": "object",
        "required": [
          "url"
        ],
        "additionalProperties": false,
        "properties": {
          "url": {
            "type": "string",
            "pattern": "(https?://.*\\.(png|jpeg|jpg|svg|gif|PNG|JPEG|JPG|SVG|GIF))$"
          }
        }
      }
    }
  }
}

Example Usage

{
  "images": [
    { "url": "https://cdn.scanova.io/banners/banner1.jpg" },
    { "url": "https://cdn.scanova.io/banners/banner2.png" },
    { "url": "https://cdn.scanova.io/banners/banner3.svg" }
  ]
}

Notes

Recommended image aspect ratio: 16:9 for best display across devices.
File size should be optimized (preferably <1MB per image) to maintain fast page load times.
Supports up to 3 banners to prevent layout overflow or distortion.

Getting Started

Code Examples

Category Components

Categories

Overview

Properties

🖼️ Image Object

Validation Rules

Used In Categories

Example Schema

Example Usage

Notes

​Overview

​Properties

​🖼️ Image Object

​Validation Rules

​Used In Categories

​Example Schema

​Example Usage

​Notes

Overview

Properties

🖼️ Image Object

Validation Rules

Used In Categories

Example Schema

Example Usage

Notes