Images article updates 8.0

aspnetcore/blazor/file-downloads.md

@@ -14,7 +14,7 @@ uid: blazor/file-downloads
 
 This article explains how to download files in Blazor apps.
 
-[!INCLUDE[](~/blazor/includes/location-client-and-server-net-6-or-later.md)]
+[!INCLUDE[](~/blazor/includes/location-client-and-server-net6-or-later.md)]
 
 Files can be downloaded from the app's own static assets or from any other location:
 

aspnetcore/blazor/images.md

@@ -14,6 +14,8 @@ uid: blazor/images
 
 This article describes common scenarios for working with images in Blazor apps. 
 
+[!INCLUDE[](~/blazor/includes/location-client-and-server-net6-or-later.md)]
+
 ## Dynamically set an image source
 
 The following example demonstrates how to dynamically set an image's source with a C# field.
@@ -32,9 +34,44 @@ In the following `ShowImage1` component:
 * 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.
 
-`Pages/ShowImage1.razor`:
+`ShowImage1.razor`:
+
+:::moniker range=">= aspnetcore-8.0"
+
+```razor
+@page "/show-image-1"
+@attribute [RenderModeServer]
+
+<h1>Dynamic Image Source Example</h1>
+
+@if (imageSource is not null)
+{
+    <p>
+        <img src="@imageSource" />
+    </p>
+}
+
+@for (var i = 1; i <= 3; i++)
+{
+    var imageId = i;
+    <button @onclick="() => ShowImage(imageId)">
+        Image @imageId
+    </button>
+}
+
+@code {
+    private string? imageSource;
 
-:::moniker range=">= aspnetcore-7.0"
+    private void ShowImage(int id)
+    {
+        imageSource = $"images/image{id}.png";
+    }
+}
+```
+
+:::moniker-end
+
+:::moniker range=">= aspnetcore-7.0 < aspnetcore-8.0"
 
 :::code language="razor" source="~/../blazor-samples/7.0/BlazorSample_WebAssembly/Pages/images/ShowImage1.razor":::
 
@@ -108,11 +145,47 @@ The following `ShowImage2` component:
   * Invokes the `setImage` JavaScript function, which accepts the data on the client.
 
 > [!NOTE]
-> Blazor Server apps use a dedicated <xref:System.Net.Http.HttpClient> service to make requests, so no action is required by the developer in Blazor Server apps to register an <xref:System.Net.Http.HttpClient> service. Blazor WebAssembly apps have a default <xref:System.Net.Http.HttpClient> service registration when the app is created from a Blazor WebAssembly project template. If an <xref:System.Net.Http.HttpClient> service registration isn't present in `Program.cs` of a Blazor WebAssembly app, provide one by adding `builder.Services.AddHttpClient();`. For more information, see <xref:fundamentals/http-requests>.
+> Server-side apps use a dedicated <xref:System.Net.Http.HttpClient> service to make requests, so no action is required by the developer of a server-side Blazor app to register an <xref:System.Net.Http.HttpClient> service. Client-side apps have a default <xref:System.Net.Http.HttpClient> service registration when the app is created from a Blazor project template. If an <xref:System.Net.Http.HttpClient> service registration isn't present in the `Program` file of a client-side app, provide one by adding `builder.Services.AddHttpClient();`. For more information, see <xref:fundamentals/http-requests>.
+
+`ShowImage2.razor`:
+
+:::moniker range=">= aspnetcore-8.0"
 
-`Pages/ShowImage2.razor`:
+```razor
+@page "/show-image-2"
+@attribute [RenderModeServer]
+@inject HttpClient Http
+@inject IJSRuntime JS
 
-:::moniker range=">= aspnetcore-7.0"
+<h1>Stream Image Data Example</h1>
+
+<p>
+    <img id="image" />
+</p>
+
+<button @onclick="SetImageAsync">
+    Set Image
+</button>
+
+@code {
+    private async Task<Stream> GetImageStreamAsync()
+    {
+        return await Http.GetStreamAsync(
+            "https://avatars.githubusercontent.com/u/9141961");
+    }
+
+    private async Task SetImageAsync()
+    {
+        var imageStream = await GetImageStreamAsync();
+        var dotnetImageStream = new DotNetStreamReference(imageStream);
+        await JS.InvokeVoidAsync("setImage", "image", dotnetImageStream);
+    }
+}
+```
+
+:::moniker-end
+
+:::moniker range=">= aspnetcore-7.0 < aspnetcore-8.0"
 
 :::code language="razor" source="~/../blazor-samples/7.0/BlazorSample_WebAssembly/Pages/images/ShowImage2.razor":::
 
@@ -126,13 +199,8 @@ The following `ShowImage2` component:
 
 ## Additional resources
 
-<!--
-
-* <xref:blazor/forms-and-input-components#preview-an-image-provided-by-the-inputfile-component>
-
--->
-
 * <xref:blazor/file-uploads>
+* [File uploads: Upload image preview](xref:blazor/file-uploads#upload-image-preview)
 * <xref:blazor/file-downloads>
 * <xref:blazor/js-interop/call-dotnet-from-javascript#stream-from-javascript-to-net>
 * <xref:blazor/js-interop/call-javascript-from-dotnet#stream-from-net-to-javascript>

aspnetcore/blazor/includes/location-client-and-server-net6-or-later.md

@@ -0,0 +1,40 @@
+Throughout this article, the terms **client**/**client-side** and **server**/**server-side** are used to distinguish locations where app code executes:
+
+:::moniker range=">= aspnetcore-8.0"
+
+* **Client**/**client-side**
+  * Client-side rendering (CSR) and interactivity of a Blazor Web App. The `Program` file is `Program.cs` of the client project (`BlazorWeb-CSharp.Client`). Blazor script start configuration is found in the `App` component (`Components/App.razor`) of the server project (`BlazorWeb-CSharp`).
+  * A Blazor WebAssembly app. The `Program` file is `Program.cs`. Blazor script start configuration is found in the `wwwroot/index.html` file.
+* **Server**/**server-side**: Server-side rendering (SSR) and interactivity of a Blazor Web App. The `Program` file is `Program.cs` of the server project (`BlazorWeb-CSharp`). Blazor script start configuration is found in the `App` component (`Components/App.razor`).
+
+Routable components with an `@page` directive are placed in the `Components/Pages` folder. Non-routable shared components are placed in the `Components` folder.
+
+:::moniker-end
+
+:::moniker range=">= aspnetcore-7.0 < aspnetcore-8.0"
+
+* **Client**/**client-side**
+  * The **`Client`** project of a hosted Blazor WebAssembly app.
+  * A Blazor WebAssembly app.
+  * Blazor script start configuration is found in the `wwwroot/index.html` file.
+  * The `Program` file is `Program.cs`.
+* **Server**/**server-side**
+  * The **`Server`** project of a hosted Blazor WebAssembly app.
+  * A Blazor Server app. Blazor script start configuration is found in `Pages/_Host.cshtml`.
+  * The `Program` file is `Program.cs`.
+
+:::moniker-end
+
+:::moniker range="< aspnetcore-7.0"
+
+* **Client**/**client-side**
+  * The **`Client`** project of a hosted Blazor WebAssembly app.
+  * A Blazor WebAssembly app.
+  * Blazor script start configuration is found in the `wwwroot/index.html` file.
+  * The `Program` file is `Program.cs`.
+* **Server**/**server-side**
+  * The **`Server`** project of a hosted Blazor WebAssembly app.
+  * A Blazor Server app. Blazor script start configuration is found in `Pages/_Layout.cshtml`.
+  * The `Program` file is `Program.cs`.
+
+:::moniker-end

aspnetcore/blazor/includes/location-client-and-server-net7-or-later.md

@@ -0,0 +1,26 @@
+Throughout this article, the terms **client**/**client-side** and **server**/**server-side** are used to distinguish locations where app code executes:
+
+:::moniker range=">= aspnetcore-8.0"
+
+* **Client**/**client-side**
+  * Client-side rendering (CSR) and interactivity of a Blazor Web App. The `Program` file is `Program.cs` of the client project (`BlazorWeb-CSharp.Client`). Blazor script start configuration is found in the `App` component (`Components/App.razor`) of the server project (`BlazorWeb-CSharp`).
+  * A Blazor WebAssembly app. The `Program` file is `Program.cs`. Blazor script start configuration is found in the `wwwroot/index.html` file.
+* **Server**/**server-side**: Server-side rendering (SSR) and interactivity of a Blazor Web App. The `Program` file is `Program.cs` of the server project (`BlazorWeb-CSharp`). Blazor script start configuration is found in the `App` component (`Components/App.razor`).
+
+Routable components with an `@page` directive are placed in the `Components/Pages` folder. Non-routable shared components are placed in the `Components` folder.
+
+:::moniker-end
+
+:::moniker range="< aspnetcore-8.0"
+
+* **Client**/**client-side**
+  * The **`Client`** project of a hosted Blazor WebAssembly app.
+  * A Blazor WebAssembly app.
+  * Blazor script start configuration is found in the `wwwroot/index.html` file.
+  * The `Program` file is `Program.cs`.
+* **Server**/**server-side**
+  * The **`Server`** project of a hosted Blazor WebAssembly app.
+  * A Blazor Server app. Blazor script start configuration is found in `Pages/_Host.cshtml`.
+  * The `Program` file is `Program.cs`.
+
+:::moniker-end

aspnetcore/blazor/includes/location-client-and-server-net8-or-later.md

@@ -0,0 +1,8 @@
+Throughout this article, the terms **client**/**client-side** and **server**/**server-side** are used to distinguish locations where app code executes:
+
+* **Client**/**client-side**
+  * Client-side rendering (CSR) and interactivity of a Blazor Web App. The `Program` file is `Program.cs` of the client project (`BlazorWeb-CSharp.Client`). Blazor script start configuration is found in the `App` component (`Components/App.razor`) of the server project (`BlazorWeb-CSharp`).
+  * A Blazor WebAssembly app. The `Program` file is `Program.cs`. Blazor script start configuration is found in the `wwwroot/index.html` file.
+* **Server**/**server-side**: Server-side rendering (SSR) and interactivity of a Blazor Web App. The `Program` file is `Program.cs` of the server project (`BlazorWeb-CSharp`). Blazor script start configuration is found in the `App` component (`Components/App.razor`).
+
+Routable components with an `@page` directive are placed in the `Components/Pages` folder. Non-routable shared components are placed in the `Components` folder.