Bootstrap Blazor enterprise-level UI component library

Enterprise-level component library based on Bootstrap and Blazor

Image Viewer pictures

In container, and retain the native characteristics of the img, to support lazy loading, custom placeholder, load, failure, etc

Basic usage

Load and display the image files

Demo

object-fit: fill Fill the default drawing picture to fill the whole container, does not guarantee that keep the original proportion
object-fit: contain Contains keep original size scaling to ensure the whole image can be appeared in the container, so this parameter may be left blank in the container
object-fit: cover Cover to keep the original size scaling, width and height of at least one consistent and containers (size small) so this parameter may let image section area is not visible
object-fit: none No keep original size proportion, while maintaining the original size, hidden extra parts
object-fit: scale-down To reduce as if, in turn, set the none or contain the is the relatively small size of the ultimate

Fill

Contain

Cover

None

ScaleDown

@inject IStringLocalizer<ImageViewerNormal> Localizer

<div>
    <ul class="ul-demo">
        <li>@((MarkupString)Localizer["ImageViewerNormalTips1"].Value)</li>
        <li>@((MarkupString)Localizer["ImageViewerNormalTips2"].Value)</li>
        <li>@((MarkupString)Localizer["ImageViewerNormalTips3"].Value)</li>
        <li>@((MarkupString)Localizer["ImageViewerNormalTips4"].Value)</li>
        <li>@((MarkupString)Localizer["ImageViewerNormalTips5"].Value)</li>
    </ul>
    <div class="images mt-3">
        <div class="images-item">
            <div>Fill</div>
            <ImageViewer Url="_content/BootstrapBlazor.Shared/images/bird.jpeg"
                         FitMode="ObjectFitMode.Fill" />
        </div>
        <div class="images-item">
            <div>Contain</div>
            <ImageViewer Url="_content/BootstrapBlazor.Shared/images/bird.jpeg"
                         FitMode="ObjectFitMode.Contain" />
        </div>
        <div class="images-item">
            <div>Cover</div>
            <ImageViewer Url="_content/BootstrapBlazor.Shared/images/bird.jpeg"
                         FitMode="ObjectFitMode.Cover" />
        </div>
        <div class="images-item">
            <div>None</div>
            <ImageViewer Url="_content/BootstrapBlazor.Shared/images/bird.jpeg"
                         FitMode="ObjectFitMode.None" />
        </div>
        <div class="images-item">
            <div>ScaleDown</div>
            <ImageViewer Url="_content/BootstrapBlazor.Shared/images/bird.jpeg"
                         FitMode="ObjectFitMode.ScaleDown" />
        </div>
    </div>
</div>

The placeholder content

Can be set up by the Show Place Holder open placeholder function, by setting the Place Holder Template define placeholder content

Demo

Pictures after loading the default browser caches, suggest F12 turn off caching experience this functionality

Default

Custom

Loading ...

@inject IStringLocalizer<ImageViewerPlaceHolder> Localizer

<div>
    <div>@((MarkupString)Localizer["ImageViewerPlaceHolderTips1"].Value)</div>
    <div class="images img-ph mt-3">
        <div class="images-item">
            <div>@Localizer["ImageViewerPlaceHolderDefault"]</div>
            <ImageViewer Url="_content/BootstrapBlazor.Shared/images/image-ph.jpeg" ShowPlaceHolder="true" />
        </div>
        <div class="images-item">
            <div>@Localizer["ImageViewerPlaceHolderCustom"]</div>
            <ImageViewer Url="_content/BootstrapBlazor.Shared/images/image-ph.jpeg" ShowPlaceHolder="true">
                <PlaceHolderTemplate>
                    <div class="bb-img-holder">
                        <div class="bb-img-loading">@Localizer["ImageViewerPlaceHolderLoading"]</div>
                    </div>
                </PlaceHolderTemplate>
            </ImageViewer>
        </div>
    </div>
</div>

The placeholder template

Can be set up by the Place Holder Template open placeholder Template function, not set Url or being loaded displayed when the content of the Template

Demo

Pictures after loading the default browser caches, suggest F12 turn off caching experience this functionality

Is not set Url

The placeholder template

When loading show

The placeholder template

@inject IStringLocalizer<ImageViewerPlaceHolderTemplate> Localizer

<div>
    <div>@((MarkupString)Localizer["ImageViewerPlaceHolderTemplateTips1"].Value)</div>
    <div class="images img-ph mt-3">
        <div class="images-item">
            <div>@Localizer["ImageViewerPlaceHolderTemplateUrl"]</div>
            <ImageViewer Url="">
                <PlaceHolderTemplate>
                    <div class="bb-img-holder">
                        <div class="bb-img-loading">@Localizer["ImageViewerPlaceHolderTemplateplaceholder"]</div>
                    </div>
                </PlaceHolderTemplate>
            </ImageViewer>
        </div>
        <div class="images-item">
            <div>@Localizer["ImageViewerPlaceHolderTemplateLoadingShow"]</div>
            <ImageViewer Url="_content/BootstrapBlazor.Shared/images/image-ph.jpeg" ShowPlaceHolder="true">
                <PlaceHolderTemplate>
                    <div class="bb-img-holder">
                        <div class="bb-img-loading">@Localizer["ImageViewerPlaceHolderTemplateplaceholder"]</div>
                    </div>
                </PlaceHolderTemplate>
            </ImageViewer>
        </div>
    </div>
</div>

Load failed

Can be set up by the Error Template open Error Template function, Url parameter Url unable to load images displayed when the content of the Template

Demo

Url The path error

The custom

@inject IStringLocalizer<ImageViewerErrorTemplate> Localizer

<div>
    <div class="images img-ph mt-3">
        <div class="images-item">
            <div>@Localizer["ImageViewerErrorTemplateUrlError"]</div>
            <ImageViewer Url="_content/BootstrapBlazor.Shared/images/error-image.jpeg" HandleError="true" />
        </div>
        <div class="images-item">
            <div>@Localizer["ImageViewerErrorTemplateCustom"]</div>
            <ImageViewer Url="_content/BootstrapBlazor.Shared/images/error-image.jpeg">
                <ErrorTemplate>
                    <div class="bb-img-holder">
                        <div class="bb-img-loading">@Localizer["ImageViewerErrorTemplateLoadFailed"]</div>
                    </div>
                </ErrorTemplate>
            </ImageViewer>
        </div>
    </div>
</div>

A larger preview

Can be set up by the Preview List opens a larger Preview of the function

Demo

@inject IStringLocalizer<ImageViewerPreviewList> Localizer

<div class="images img-ph mt-3">
    <div class="images-item">
        <ImageViewer Url="_content/BootstrapBlazor.Shared/images/bird.jpeg" PreviewList="PreviewList" />
    </div>
</div>

@code {
    private List<string> PreviewList { get; } = new();

    /// <summary>
    /// OnInitialized
    /// </summary>
    protected override void OnInitialized()
    {
        base.OnInitialized();

        PreviewList.AddRange(new string[]
        {
            "_content/BootstrapBlazor.Shared/images/ImageList1.jpeg",
            "_content/BootstrapBlazor.Shared/images/ImageList2.jpeg"
        });
    }
}

Attributes

B station related video link

交流群

QQ Group：BootstrapAdmin & Blazor 795206915 675147445 Welcome to join the group discussion

Image Viewer pictures

In container, and retain the native characteristics of the img, to support lazy loading, custom placeholder, load, failure, etc

Demo

Demo

Demo

Demo

Demo

Attributes

Bootstrap Blazor Component library updated to 7.4.4-beta01