← Back to Components

Image Helper Web Component

A user-friendly component for displaying and interacting with SVG images. This component provides a clean interface to view, download, and copy images in different formats.

Features

• Displays SVG images with a professional card-style interface
• Download images directly to your device
• Copy images as PNG to clipboard
• Copy image URLs to clipboard
• Customizable headline, subline, and description
• Responsive design that works on mobile and desktop
• Configurable background color
• Notification system for user feedback

Installation

Include the component in your project:

<script src="https://cdn.q360.ai/assets/components/image-helper/qds-image-helper.js" type="module"></script>

Or import it in your JavaScript:

import "https://cdn.q360.ai/assets/components/image-helper/qds-image-helper.js";

You can also load all components at once:

<script src="https://cdn.q360.ai/assets/components/index.js" type="module"></script>

Usage

Basic Usage with Default Settings

The simplest way to use the component:

<qds-image-helper></qds-image-helper>

This will display:

• Default Quilt logo SVG
• Default headline and description
• Download, Copy as PNG, and Copy Link buttons

Customizing Attributes

You can customize the image helper by setting attributes:

<qds-image-helper
  src="https://cdn.q360.ai/qed-design/QuantumLogos/QCG/qcg-logo.svg"
  headline="QCG Logo"
  subline="Official company logo"
  description="Use SVG for websites and PNG for presentations."
  backgroundcolor="#f0f0f0">
</qds-image-helper>

Using in a Page

<div class="logo-gallery">
  <h2>Brand Logos</h2>
  <div class="logo-list">
    <qds-image-helper
      src="https://cdn.q360.ai/qed-design/QuantumLogos/QCG/qcg-logo.svg"
      headline="QCG Logo">
    </qds-image-helper>
    
    <qds-image-helper
      src="https://cdn.q360.ai/qed-design/QuantumLogos/Quilt/quilt-default-logo-blue.svg"
      headline="Quilt Logo"
      backgroundcolor="#f0f0f0">
    </qds-image-helper>
  </div>
</div>

Attributes

Attribute	Type	Description	Default
src	String	URL of the image	‘https://cdn.q360.ai/qed-design/QuantumLogos/Quilt/quilt-default-logo-blue.svg‘
headline	String	Title displayed below the image	‘Headline’
subline	String	Subtitle displayed below headline	‘’
description	String	Descriptive text under the title	‘Use PNG for presentations materials…’
backgroundcolor	String	Background color for image display	‘#fff’ (white)

Methods

The component provides several methods that can be called programmatically:

Method	Description
downloadImage()	Triggers download of the current image
copyAsPng()	Copies the image as PNG to the clipboard
copyLink()	Copies the image URL to the clipboard

Events

The component uses standard click events but does not emit custom events. User actions trigger the following functionality:

• Click on download button: Downloads the image
• Click on copy PNG button: Copies image as PNG to clipboard
• Click on copy link button: Copies image URL to clipboard

Styling

The component uses internal styling with responsive design. The container adapts to different screen sizes, and the component is optimized for both desktop and mobile viewing.

Browser Support

This component uses modern web APIs including:

• Canvas API
• Clipboard API
• Fetch API
• URL API

It is compatible with all modern browsers that support Web Components and these APIs.