Product Image Gallery

Build a product gallery component that efficiently displays multiple product images using lazy loading to optimize page load performance.

Requirements

Create a Vue 3 component that displays a list of product images with the following features:

Image Loading

• Images should lazy load when they are about to enter the viewport
• Display a placeholder or loading state while images are loading
• Handle image load errors by displaying an error placeholder
• Images should fit within their containers using the 'cover' fit mode

Gallery Layout

• Display products in a vertical list
• Each product displays an image, name, and price
• Images should have a consistent size (200px x 200px)

Test Cases

• Rendering 6 products displays 6 product items with images @test
• Images use lazy loading and have appropriate loading placeholders @test
• Failed image loads display error placeholders @test

Implementation

@generates

API

export interface Product {
  id: number;
  name: string;
  price: string;
  imageUrl: string;
}

export interface ProductGalleryProps {
  products: Product[];
}

Dependencies { .dependencies }

vant { .dependency }

Provides mobile UI components including Image component with lazy loading support.