Image Gallery: Simple Grid Layout

Simplest Example

This example has no title or date set, and so it will not display a header.

View Code

<VpvImageGallery
    :folders="[
        '/gallery/nature',
    ]"
/>

Example

These examples are all the same, except they reference different subdirectories in the main gallery folder.

Sample Gallery - NatureOctober 1, 2025

View Code

<VpvImageGallery
    headerTitle="Sample Gallery - Nature"
    headerDate="2025-10-01"
    :folders="[
        '/gallery/nature',
    ]"
/>

Sample Gallery - UrbanOctober 1, 2025

View Code

<VpvImageGallery
    headerTitle="Sample Gallery - Urban"
    headerDate="2025-10-01"
    :folders="[
        '/gallery/urban',
    ]"
/>

Combine Multiple FoldersOctober 1, 2025

View Code

<VpvImageGallery
    headerTitle="Combine Multiple Folders"
    headerDate="2025-10-01"
    :folders="[
        '/gallery/nature', 
        '/gallery/urban'
    ]"
/>

External Images

This example shows how to use direct image URLs instead of gallery data.

External ImagesOctober 1, 2025

View Code

<VpvImageGallery
    headerTitle="External Images"
    headerDate="2025-10-01"
    :direct-urls="[
        'https://picsum.photos/id/11/2500/1667',
        'https://picsum.photos/id/27/3264/1836'
    ]"
/>

A Gallery with Errors

If the component can not find any images in a folder, it will display an error message.

Sample Gallery with ErrorsOctober 1, 2025

If some directories are valid, while others are not, only the valid ones will be displayed.

Combine Multiple Folders, with an errorOctober 1, 2025

If you set direct links, for either local images or external URLs, the component will try to load them even if there are errors.

Direct links with errorsOctober 1, 2025

View Code

<VpvImageGallery
    headerTitle="Sample Gallery with Errors"
    headerDate="2025-10-01"
    :folders="[
        '/gallery/error',
    ]"
/>

If some directories are valid, while others are not, only the valid ones will be displayed.

<VpvImageGallery
    headerTitle="Combine Multiple Folders, with an error"
    headerDate="2025-10-01"
    :folders="['/gallery/error', '/gallery/urban']"
/>

If you set direct links, for either local images or external URLs, the component will try to load them even if there are errors.

<VpvImageGallery
    headerTitle="Direct links with errors"
    headerDate="2025-10-01"
    :direct-urls="[
        'https://picsum.photos/id/11/2500/1667',
        'https://example.com/error',
        '/demo-blog/june-light.jpg',
        '/demo-blog/error.jpg',
    ]"
/>

Credits

Nature Images

• Photo by Ingmar on Unsplash
• Photo by Evgeni Tcherkasski on Unsplash
• Photo by Bobby on Unsplash
• Photo by Kristaps Ungurs on Unsplash
• Photo by Bernhard on Unsplash
• Photo by Filip Kvasnak on Unsplash
• Photo by Gaelle Marcel on Unsplash

Urban Images

• Photo by Artūrs Ķipsts on Unsplash
• Photo by Rob Potter on Unsplash
• Photo by Liobell Liu on Unsplash
• Photo by Hin Bong Yeung on Unsplash
• Photo by Ryan Loughlin on Unsplash