--- title: Display images and documents in ASP.NET Core Blazor author: guardrex description: Learn how to display images and documents in ASP.NET Core Blazor apps. monikerRange: '>= aspnetcore-6.0' ms.author: riande ms.custom: mvc ms.date: 11/12/2024 uid: blazor/images-and-documents --- # Display images and documents in ASP.NET Core Blazor [!INCLUDE[](~/includes/not-latest-version.md)] This article describes approaches for displaying images and documents in Blazor apps. The examples in this article are available for inspection and use in the [Blazor sample apps](xref:blazor/fundamentals/index#sample-apps): [`dotnet/blazor-samples` GitHub repository](https://github.com/dotnet/blazor-samples): Navigate to the app named `BlazorSample_BlazorWebApp` (8.0 or later), `BlazorSample_Server` (7.0 or earlier), or `BlazorSample_WebAssembly`. ## Dynamically set an image source The following example demonstrates how to dynamically set an image's source with a C# field. The example in this section uses three image files, named `image1.png`, `image2.png`, and `image3.png`. The images are placed in a folder named `images` in the app's web root (`wwwroot`). The use of the `images` folder is only for demonstration purposes. You can organize static assets in any folder layout that you prefer, including serving assets directly from the `wwwroot` folder. In the following `ShowImage1` component: * The image's source (`src`) is dynamically set to the value of `imageSource` in C#. * The `ShowImage` method updates the `imageSource` field based on an image `id` argument passed to the method. * Rendered buttons call the `ShowImage` method with an image argument for each of the three available images in the `images` folder. The file name is composed using the argument passed to the method and matches one of the three images in the `images` folder. `ShowImage1.razor`: :::moniker range=">= aspnetcore-9.0" :::code language="razor" source="~/../blazor-samples/9.0/BlazorSample_BlazorWebApp/Components/Pages/ShowImage1.razor"::: :::moniker-end :::moniker range=">= aspnetcore-8.0 < aspnetcore-9.0" :::code language="razor" source="~/../blazor-samples/8.0/BlazorSample_BlazorWebApp/Components/Pages/ShowImage1.razor"::: :::moniker-end :::moniker range=">= aspnetcore-7.0 < aspnetcore-8.0" :::code language="razor" source="~/../blazor-samples/7.0/BlazorSample_WebAssembly/Pages/images/ShowImage1.razor"::: :::moniker-end :::moniker range="< aspnetcore-7.0" :::code language="razor" source="~/../blazor-samples/6.0/BlazorSample_WebAssembly/Pages/images/ShowImage1.razor"::: :::moniker-end The preceding example uses a C# field to hold the image's source data, but you can also use a C# property to hold the data. Avoid using a loop variable directly in a lambda expression, such as `i` in the preceding `for` loop example. Otherwise, the same variable is used by all lambda expressions, which results in use of the same value in all lambdas. Capture the variable's value in a local variable. In the preceding example: * The loop variable `i` is assigned to `imageId`. * `imageId` is used in the lambda expression. Alternatively, use a `foreach` loop with , which doesn't suffer from the preceding problem: ```razor @foreach (var imageId in Enumerable.Range(1, 3)) { } ``` For more information on lambda expressions with event handling, see . ## Stream image or document data An image or other document type, such as a PDF, can be directly transmitted to the client using Blazor's streaming interop features instead of hosting the file at a public URL. The example in this section streams source data using [JavaScript (JS) interop](xref:blazor/js-interop/index). The following `setSource` JS function: * Can be used to stream content for the following elements: ``, `

`, `