Skip to main content

​
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

PropertyTypeRequiredDescription
imagesarray<object>✅ YesList of image objects to display as banners. Supports up to 3 images.

​
🖼️ Image Object

Sub-PropertyTypeRequiredDescription
urlstring✅ YesDirect 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.