Varias aplicaciones Blazor WebAssembly de ASP.NET Core hospedadas

En este artículo se explica cómo configurar una aplicación Blazor WebAssembly hospedada para hospedar varias aplicaciones Blazor WebAssembly.

Configuración

Seleccione la versión de este artículo que coincida con los requisitos de hospedaje, ya sea de puertos o dominios (por ejemplo, :5001/:5002 o firstapp.com/secondapp.com) o de subrutas de ruta (por ejemplo, /FirstApp y /SecondApp).

Con la selección de hospedaje actual, en este artículo se trata el hospedaje de puertos o dominios (por ejemplo, :5001/:5002 o firstapp.com/secondapp.com).

En los siguientes ejemplos:

• El nombre del proyecto de la aplicación Blazor WebAssembly hospedada es MultipleBlazorApps en una carpeta denominada MultipleBlazorApps.
• Los tres proyectos de la solución antes de agregar una segunda aplicación cliente son MultipleBlazorApps.Client en la carpeta Client, MultipleBlazorApps.Server en la carpeta Server y MultipleBlazorApps.Shared en la carpeta Shared.
• La aplicación cliente inicial (primera) es el proyecto de cliente predeterminado de la solución creada a partir de la plantilla de proyecto Blazor WebAssembly.
• Se agrega una segunda aplicación cliente a la solución, MultipleBlazorApps.SecondClient en una carpeta llamada SecondClient.
• Opcionalmente, el proyecto de servidor (MultipleBlazorApps.Server) puede servir páginas o vistas como aplicación Razor Pages o MVC.
• Se puede acceder a la primera aplicación cliente en un explorador en el puerto 5001 o con un host de firstapp.com. Se puede acceder a la segunda aplicación cliente en un explorador en el puerto 5002 o con un host de secondapp.com.

Con la selección actual, en este artículo se describe el hospedaje de subrutas de ruta (por ejemplo, /FirstApp y /SecondApp).

En los siguientes ejemplos:

• El nombre del proyecto de la aplicación Blazor WebAssembly hospedada es MultipleBlazorApps en una carpeta denominada MultipleBlazorApps.
• Los tres proyectos de la solución antes de agregar una segunda aplicación cliente son MultipleBlazorApps.Client en la carpeta Client, MultipleBlazorApps.Server en la carpeta Server y MultipleBlazorApps.Shared en la carpeta Shared.
• La aplicación cliente inicial (primera) es el proyecto de cliente predeterminado de la solución creada a partir de la plantilla de proyecto Blazor WebAssembly.
• Se agrega una segunda aplicación cliente a la solución, MultipleBlazorApps.SecondClient en una carpeta llamada SecondClient.
• Opcionalmente, el proyecto de servidor (MultipleBlazorApps.Server) puede servir páginas o vistas como una aplicación Razor Pages o MVC formal.
• Ambas aplicaciones cliente usan el puerto predeterminado definido por el archivo MultipleBlazorApps.Server del proyecto Properties/launchSettings.json en su valor applicationUrl. A la primera aplicación cliente se accede desde el explorador, en la subruta /FirstApp. A la segunda aplicación cliente se accede desde el explorador, en la subruta /SecondApp.

Los ejemplos que se muestran en este artículo requieren más configuración para:

• Acceder a las aplicaciones en los dominios host de ejemplo, firstapp.com y secondapp.com.
• Certificados que permitan a las aplicaciones cliente habilitar la seguridad TLS (HTTPS).
• Configuración de las siguientes características en la aplicación de servidor como una aplicación Razor Pages:
  • Integración de componentes Razor en páginas o vistas.
  • Representación previa de componentes Razor.

Las configuraciones anteriores no se incluyen en el ámbito de este artículo. Para obtener más información, consulte los siguientes recursos:

• Artículos sobre hospedaje e implementación
• Aplicación de HTTPS en ASP.NET Core
• Integración y representación previa de componentes de Razor de ASP.NET Core

Use una solución de Blazor WebAssemblyhospedada o cree una nueva solución hospedada de Blazor WebAssembly desde la plantilla de proyecto Blazor WebAssembly pasando la opción -ho|--hosted si está usando .NET CLI o seleccionando la casilla ASP.NET Core hospedado en Visual Studio cuando el proyecto se haya creado en el IDE.

Use una carpeta para la solución denominada MultipleBlazorApps y asigne al proyecto el nombre MultipleBlazorApps.

Cree una carpeta en la solución denominada SecondClient. En la nueva carpeta, agregue una segunda aplicación cliente Blazor WebAssembly denominada MultipleBlazorApps.SecondClient. Agregue el proyecto como una aplicación Blazor WebAssembly independiente. Para crear una aplicación Blazor WebAssembly independiente, no pase la opción -ho|--hosted si usa la CLI de .NET o no use la casilla ASP.NET Core hospedado si emplea Visual Studio.

Realice los siguientes cambios en el proyecto MultipleBlazorApps.SecondClient:

• Copie el componente FetchData (Pages/FetchData.razor) de la carpeta Client/Pages en la carpeta SecondClient/Pages. Este paso es obligatorio, ya que una aplicación Blazor WebAssemblyindependiente no llama al controlador del proyecto Server para los datos meteorológicos, usa un archivo de datos estático. Al copiar el componente FetchData en el proyecto agregado, la segunda aplicación cliente también realiza una llamada API web a la API del servidor para los datos meteorológicos.
• Elimine la carpeta SecondClient/wwwroot/sample-data, ya que el archivo weather.json de la carpeta no se usa.

En la tabla siguiente se describen los nombres de las carpetas y los proyectos de la solución una vez agregadas la carpeta SecondClient y el proyecto MultipleBlazorApps.SecondClient.

Carpeta física	Nombre de proyecto	Descripción
Client	MultipleBlazorApps.Client	Aplicación cliente Blazor WebAssembly
SecondClient	MultipleBlazorApps.SecondClient	Aplicación cliente Blazor WebAssembly
Server	MultipleBlazorApps.Server	Aplicación de servidor de ASP.NET Core
Shared	MultipleBlazorApps.Shared	Proyecto de recursos compartidos

El proyecto MultipleBlazorApps.Server sirve a las dos aplicaciones cliente Blazor WebAssembly y proporciona datos meteorológicos a los componentes FetchData de las aplicaciones cliente a través de un controlador MVC. Opcionalmente, el proyecto MultipleBlazorApps.Server también sirve páginas o vistas, como una aplicación Razor Pages o MVC tradicional. Los pasos para habilitar el servicio de páginas o vistas se indican más adelante en este artículo.

Nota

En la demostración de este artículo se usan los nombres de ruta de acceso de los recursos web estáticos de FirstApp para el proyecto MultipleBlazorApps.Client y SecondApp para el proyecto MultipleBlazorApps.SecondClient. Los nombres "FirstApp" y "SecondApp" son simplemente de demostración. Para distinguir las aplicaciones cliente se aceptan otros nombres, como App1/App2, Client1/Client2, 1/2 o cualquier esquema de nomenclatura similar.

Para las aplicaciones cliente, se usan "FirstApp" y "SecondApp" internamente para enrutar solicitudes por puertos o dominios y atender las respuestas para los recursos estáticos, además, no se ven en la barra de direcciones del explorador.

Nota

En la demostración de este artículo se usan los nombres de ruta de acceso de los recursos web estáticos de FirstApp para el proyecto MultipleBlazorApps.Client y SecondApp para el proyecto MultipleBlazorApps.SecondClient. Los nombres "FirstApp" y "SecondApp" son simplemente de demostración. Para distinguir las aplicaciones cliente se aceptan otros nombres, como App1/App2, Client1/Client2, 1/2 o cualquier esquema de nomenclatura similar.

"FirstApp" y "SecondApp" también aparecen en la barra de direcciones del explorador, ya que las solicitudes se enrutan a las dos aplicaciones cliente con estos nombres. Se admiten otros segmentos de ruta URL válidos; los segmentos de ruta no necesitan coincidir estrictamente con los nombres que se usan para enrutar los recursos web estáticos internamente. "FirstApp" y "SecondApp" simplemente se usan para el enrutamiento de los recursos estáticos internos y el enrutamiento de solicitudes de aplicación en los ejemplos de este artículo.

En el primer archivo de proyecto de la aplicación cliente (MultipleBlazorApps.Client.csproj), agregue una propiedad <StaticWebAssetBasePath> a un objeto <PropertyGroup> con un valor de FirstApp para establecer la ruta de acceso base de los recursos estáticos del proyecto:

<StaticWebAssetBasePath>FirstApp</StaticWebAssetBasePath>

En el archivo de proyecto de la aplicación MultipleBlazorApps.SecondClient (MultipleBlazorApps.SecondClient.csproj):

• Agregue una propiedad <StaticWebAssetBasePath> a <PropertyGroup> con un valor de SecondApp:

  <StaticWebAssetBasePath>SecondApp</StaticWebAssetBasePath>
  

• Agregue una referencia de proyecto MultipleBlazorApps.Shared a un objeto <ItemGroup>:

  <ItemGroup>
    <ProjectReference Include="..\Shared\MultipleBlazorApps.Shared.csproj" />
  </ItemGroup>
  

En el archivo de proyecto de la aplicación de servidor (Server/MultipleBlazorApps.Server.csproj), cree una referencia de proyecto para la aplicación cliente MultipleBlazorApps.SecondClient agregada en un objeto <ItemGroup>:

<ProjectReference Include="..\SecondClient\MultipleBlazorApps.SecondClient.csproj" />

En el archivo Properties/launchSettings.json de la aplicación de servidor, configure el elemento applicationUrl del perfil de Kestrel (MultipleBlazorApps.Server) para acceder a las aplicaciones cliente en los puertos 5001 y 5002. Si configura el entorno local para usar los dominios de ejemplo, las direcciones URL para applicationUrl pueden usar firstapp.com y secondapp.com no los puertos.

Nota

El uso de puertos en esta demostración permite el acceso a los proyectos de cliente en un explorador local sin necesidad de configurar un entorno de hospedaje local para que los exploradores web puedan acceder a las aplicaciones cliente a través de las configuraciones de host, firstapp.com y secondapp.com. En escenarios de producción, una configuración habitual consiste en usar subdominios para distinguir las aplicaciones cliente.

Por ejemplo:

• Los puertos se quitan de la configuración de esta demostración.
• Los hosts se cambian para usar subdominios, como www.contoso.com para los visitantes del sitio y admin.contoso.com para los administradores.
• Se pueden incluir hosts adicionales para aplicaciones cliente adicionales y se requiere al menos un host más si la aplicación de servidor también es una aplicación Razor Pages o MVC que sirve páginas o vistas.

Si tiene previsto servir páginas o vistas desde la aplicación de servidor, use el siguiente valor de configuración applicationUrl en el archivo Properties/launchSettings.json, que permite el acceso siguiente:

• La aplicación Razor Pages o MVC (proyecto MultipleBlazorApps.Server) responde a las solicitudes en el puerto 5000.
• Las respuestas a las solicitudes del primer cliente (proyecto MultipleBlazorApps.Client) están en el puerto 5001.
• Las respuestas a las solicitudes del segundo cliente (proyecto MultipleBlazorApps.SecondClient) están en el puerto 5002.

"applicationUrl": "https://localhost:5000;https://localhost:5001;https://localhost:5002",

Si no tiene previsto que la aplicación de servidor sirva páginas o vistas y solo sirva las aplicaciones cliente Blazor WebAssembly, use la siguiente configuración, que permite el acceso siguiente:

• La primera aplicación cliente responde en el puerto 5001.
• La segunda aplicación cliente responde en el puerto 5002.

"applicationUrl": "https://localhost:5001;https://localhost:5002",

En el archivo Program.cs de la aplicación de servidor, quite el código siguiente que aparece después de la llamada a UseHttpsRedirection:

• Si tiene previsto servir páginas o vistas desde la aplicación de servidor, elimine las siguientes líneas de código:

  - app.UseBlazorFrameworkFiles();
  

  - app.MapFallbackToFile("index.html");
  

• Si planea que la aplicación de servidor solo sirva las aplicaciones cliente Blazor WebAssembly, elimine el código siguiente:

  - app.UseBlazorFrameworkFiles();
  
  ...
  
  - app.UseRouting();
  
  - app.MapRazorPages();
  - app.MapControllers();
  - app.MapFallbackToFile("index.html");
  

  Deje el middleware de archivos estáticos en su lugar:

  app.UseStaticFiles();
  

• Agregue middleware que asigna solicitudes a las aplicaciones cliente. En el ejemplo siguiente se configura el middleware que se ejecutará cuando el puerto de solicitud sea 5001 para la primera aplicación cliente o 5002 para la segunda, o el host de solicitud sea firstapp.com para la primera aplicación cliente o secondapp.com, para la segunda.

  Nota

  El uso de los hosts (firstapp.com/secondapp.com) en un sistema local con un explorador local requiere una configuración adicional que está fuera del ámbito de este artículo. Para realizar las pruebas locales de este escenario, se recomienda usar puertos. Las aplicaciones de producción típicas están configuradas para usar subdominios, como www.contoso.com para los visitantes del sitio y admin.contoso.com para los administradores. Con la configuración correcta de DNS y servidor, que está fuera del ámbito de este artículo y depende de las tecnologías usadas, la aplicación responde a las solicitudes en cualquier host con nombre en el código siguiente.

  Donde quitó la línea app.UseBlazorFrameworkFiles(); de Program.cs, coloque el código siguiente:

  app.MapWhen(ctx => ctx.Request.Host.Port == 5001 || 
      ctx.Request.Host.Equals("firstapp.com"), first =>
  {
      first.Use((ctx, nxt) =>
      {
          ctx.Request.Path = "/FirstApp" + ctx.Request.Path;
          return nxt();
      });
  
      first.UseBlazorFrameworkFiles("/FirstApp");
      first.UseStaticFiles();
      first.UseStaticFiles("/FirstApp");
      first.UseRouting();
  
      first.UseEndpoints(endpoints =>
      {
          endpoints.MapControllers();
          endpoints.MapFallbackToFile("/FirstApp/{*path:nonfile}", 
              "FirstApp/index.html");
      });
  });
  
  app.MapWhen(ctx => ctx.Request.Host.Port == 5002 || 
      ctx.Request.Host.Equals("secondapp.com"), second =>
  {
      second.Use((ctx, nxt) =>
      {
          ctx.Request.Path = "/SecondApp" + ctx.Request.Path;
          return nxt();
      });
  
      second.UseBlazorFrameworkFiles("/SecondApp");
      second.UseStaticFiles();
      second.UseStaticFiles("/SecondApp");
      second.UseRouting();
  
      second.UseEndpoints(endpoints =>
      {
          endpoints.MapControllers();
          endpoints.MapFallbackToFile("/SecondApp/{*path:nonfile}", 
              "SecondApp/index.html");
      });
  });
  

  Advertencia

  Las API que se basan en el encabezado host, como HttpRequest.Host y RequireHost, están sujetas a una posible suplantación de identidad por parte de los clientes.

  Para evitar la suplantación de identidad de host y puerto, use uno de los métodos siguientes:

  • Use HttpContext.Connection (ConnectionInfo.LocalPort) donde se comprueban los puertos.
  • Emplee el filtrado de hosts.

• Agregue middleware que asigna solicitudes a las aplicaciones cliente. En el ejemplo siguiente se configura el middleware que se ejecutará cuando la subruta de solicitud sea /FirstApp para la primera aplicación cliente o /SecondApp, para la segunda.

  Donde quitó la línea app.UseBlazorFrameworkFiles(); de Program.cs, coloque el código siguiente:

  app.MapWhen(ctx => ctx.Request.Path.StartsWithSegments("/FirstApp", 
      StringComparison.OrdinalIgnoreCase), first =>
  {
      first.UseBlazorFrameworkFiles("/FirstApp");
      first.UseStaticFiles();
      first.UseStaticFiles("/FirstApp");
      first.UseRouting();
  
      first.UseEndpoints(endpoints =>
      {
          endpoints.MapControllers();
          endpoints.MapFallbackToFile("/FirstApp/{*path:nonfile}",
              "FirstApp/index.html");
      });
  });
  
  app.MapWhen(ctx => ctx.Request.Path.StartsWithSegments("/SecondApp", 
      StringComparison.OrdinalIgnoreCase), second =>
  {
      second.UseBlazorFrameworkFiles("/SecondApp");
      second.UseStaticFiles();
      second.UseStaticFiles("/SecondApp");
      second.UseRouting();
  
      second.UseEndpoints(endpoints =>
      {
          endpoints.MapControllers();
          endpoints.MapFallbackToFile("/SecondApp/{*path:nonfile}",
              "SecondApp/index.html");
      });
  });
  

• Establezca la ruta de acceso base en cada aplicación cliente:

  En el primer archivo index.html de la aplicación cliente (Client/wwwroot/index.html), actualice el valor de etiqueta <base> para que refleje la subruta. Se requiere la barra diagonal:

  <base href="/FirstApp/" />
  

  En el segundo archivo index.html de la aplicación cliente (SecondClient/wwwroot/index.html), actualice el valor de etiqueta <base> para reflejar la subruta. Se requiere la barra diagonal:

  <base href="/SecondApp/" />
  

Para más información sobre UseStaticFiles, vea Archivos estáticos Blazor en ASP.NET Core.

Para obtener más información sobre UseBlazorFrameworkFiles y MapFallbackToFile, consulte los siguientes recursos:

• Microsoft.AspNetCore.Builder.ComponentsWebAssemblyApplicationBuilderExtensions.UseBlazorFrameworkFiles (recurso de referencia)
• Microsoft.AspNetCore.Builder.StaticFilesEndpointRouteBuilderExtensions.MapFallbackToFile (recurso de referencia)

Nota

Los vínculos de la documentación al origen de referencia de .NET cargan normalmente la rama predeterminada del repositorio, que representa el desarrollo actual para la próxima versión de .NET. Para seleccionar una etiqueta de una versión específica, use la lista desplegable Cambiar ramas o etiquetas. Para obtener más información, vea Procedimientos para seleccionar una etiqueta de versión de código fuente de ASP.NET Core (dotnet/AspNetCore.Docs #26205).

Las solicitudes de las aplicaciones cliente a /WeatherForecast en la API de servidor son para /FirstApp/WeatherForecast o /SecondApp/WeatherForecast en función de la aplicación cliente que realice la solicitud. Por lo tanto, las rutas del controlador que devuelven datos meteorológicos de la API de servidor requieren una modificación para incluir los segmentos de la ruta de acceso.

En el controlador de la previsión meteorológica de la aplicación de servidor (Controllers/WeatherForecastController.cs), reemplace la ruta existente ([Route("[controller]")]) a WeatherForecastController por las siguientes rutas, que tienen en cuenta las rutas de acceso de solicitud de los clientes:

[Route("FirstApp/[controller]")]
[Route("SecondApp/[controller]")]

Si tiene previsto servir páginas desde la aplicación de servidor, agregue una página IndexRazor a la carpeta Pages de la aplicación de servidor:

Pages/Index.cshtml:

@page
@model MultipleBlazorApps.Server.Pages.IndexModel
@{
    ViewData["Title"] = "Home";
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Home</title>
</head>
<body>
    <div class="main">
        <div class="content px-4">

            <div>
                <h1>Welcome</h1>
                <p>Hello from Razor Pages!</p>
            </div>
        </div>
    </div>
</body>
</html>

Pages/Index.cshtml.cs:

using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;

namespace MultipleBlazorApps.Server.Pages;

public class IndexModel : PageModel
{
    public void OnGet()
    {
    }
}

Nota

La página Index anterior es un ejemplo mínimo con fines exclusivos de demostración. Si la aplicación requiere recursos de Razor Pages adicionales, como un diseño, estilos, scripts e importaciones, obténgalos de una aplicación creada a partir de la plantilla de proyecto de Razor Pages. Para más información, consulte Introducción a Razor Pages en ASP.NET Core.

Si tiene previsto servir vistas de MVC desde la aplicación de servidor, agregue una vista Index y un controlador Home:

Views/Home/Index.cshtml:

@{
    ViewData["Title"] = "Home";
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Home</title>
</head>
<body>
    <div class="main">
        <div class="content px-4">

            <div>
                <h1>Welcome</h1>
                <p>Hello from MVC!</p>
            </div>
        </div>
    </div>
</body>
</html>

Controllers/HomeController.cs:

using Microsoft.AspNetCore.Mvc;

namespace MultipleBlazorApps.Server.Controllers;

public class HomeController : Controller
{
    public IActionResult Index()
    {
        return View();
    }
}

Nota

La vista Index anterior es un ejemplo mínimo con fines exclusivos de demostración. Si la aplicación requiere recursos de MVC adicionales, como un diseño, estilos, scripts e importaciones, obténgalos de una aplicación creada a partir de la plantilla de proyecto de MVC. Para más información, consulte Introducción a MVC de ASP.NET Core.

Para más información sobre el uso de los componentes Razor de cualquiera de las aplicaciones cliente en páginas o vistas de la aplicación de servidor, consulte Representación previa e integración de componentes Razor de ASP.NET Core.

Ejecución la aplicación

Ejecute el proyecto MultipleBlazorApps.Server:

• Acceda a la aplicación cliente inicial en https://localhost:5001.
• Acceda a la aplicación cliente agregada en https://localhost:5002.
• Si la aplicación de servidor está configurada para servir páginas o vistas, acceda a la página o vista de Index en https://localhost:5000.

• Acceda a la aplicación cliente inicial en https://localhost:{DEFAULT PORT}/FirstApp.
• Acceda a la aplicación cliente agregada en https://localhost:{DEFAULT PORT}/SecondApp.
• Si la aplicación de servidor está configurada para servir páginas o vistas, acceda a la página o vista de Index en https://localhost:{DEFAULT PORT}.

En las direcciones URL del ejemplo anterior, el marcador de posición {DEFAULT PORT} es el puerto predeterminado definido por el archivo MultipleBlazorApps.Server del proyecto Properties/launchSettings.json en su valor applicationUrl.

Importante

Al ejecutar la aplicación con el comando dotnet run (la CLI de .NET), confirme que el shell de comandos está abierto en la carpeta Server de la solución.

Al usar el botón Inicio de Visual Studio para ejecutar la aplicación, confirme que el proyecto MultipleBlazorApps.Server se haya establecido como proyecto de inicio (resaltado en el Explorador de soluciones).

Recursos estáticos

Cuando un recurso se encuentre en la carpeta wwwroot de una aplicación cliente, proporcione la ruta de acceso de solicitud de recursos estáticos en los componentes:

<img alt="..." src="{PATH AND FILE NAME}" />

El marcador de posición {PATH AND FILE NAME} es la ruta de acceso y el nombre de archivo en wwwroot.

Por ejemplo, el origen de una imagen de Jeep (jeep-yj.png) en la carpeta vehicle de wwwroot:

<img alt="Jeep Wrangler YJ" src="vehicle/jeep-yj.png" />

Razor Compatibilidad con la biblioteca de clases (RCL)

Agregue la Razor biblioteca de clases (RCL) a la solución como un nuevo proyecto:

• Haga clic con el botón derecho en la solución en el Explorador de soluciones y seleccione Agregar>Nuevo proyecto.
• Use la plantilla de proyecto de Biblioteca de clases Razor para crear el proyecto. En los ejemplos de esta sección se usa el nombre de proyecto ComponentLibrary, que también es el nombre del ensamblado de RCL. No active la casilla Páginas y vistas de soporte técnico.

Para cada aplicación cliente Blazor WebAssembly hospedada, cree una referencia de proyecto para el proyecto de RCL haciendo clic con el botón derecho en cada proyecto cliente en el Explorador de soluciones y seleccionando Agregar>Referencia de proyecto.

Use componentes de la RCL en las aplicaciones cliente con cualquiera de los métodos siguientes:

• Coloque una directiva @using en la parte superior del componente en el espacio de nombres de la RCL y agregue la sintaxis de Razor del componente. El ejemplo siguiente es para una RCL con el nombre de ensamblado ComponentLibrary:

  @using ComponentLibrary
  
  ...
  
  <Component1 />
  

• Proporcione el espacio de nombres de la RCL junto con la sintaxis de Razor del componente. Este método no requiere una directiva @using en la parte superior del archivo de componente. El ejemplo siguiente es para una RCL con el nombre de ensamblado ComponentLibrary:

  <ComponentLibrary.Component1 />
  

Nota

También se puede colocar una directiva @using en el archivo _Import.razor de cada aplicación cliente, lo que hace que el espacio de nombres de la RCL esté disponible globalmente para los componentes de ese proyecto.

Cuando hay otro recurso estático en la carpeta wwwroot de una RCL, haga referencia a él en una aplicación cliente según la guía de Interfaz de usuario de Razor reutilizable en bibliotecas de clases con ASP.NET Core:

<img alt="..." src="_content/{PACKAGE ID}/{PATH AND FILE NAME}" />

El marcador de posición {PACKAGE ID} es el identificador de paquete de la RCL. El id. de paquete tiene como valor predeterminado el nombre de ensamblado del proyecto si <PackageId> no se especifica en el archivo del proyecto. El marcador de posición {PATH AND FILE NAME} es la ruta de acceso y el nombre de archivo en wwwroot.

En el ejemplo siguiente se muestra el marcado de una imagen de Jeep (jeep-yj.png) en la carpeta vehicle de wwwroot de la carpeta RCL. El ejemplo siguiente es para una RCL con el nombre de ensamblado ComponentLibrary:

<img alt="Jeep Wrangler YJ" src="_content/ComponentLibrary/vehicle/jeep-yj.png" />

Recursos adicionales

• Consumo de componentes Razor de ASP.NET Core de bibliotecas de clases Razor (RCL)
• Interfaz de usuario reutilizable de Razor en bibliotecas de clases con ASP.NET Core
• Aislamiento de CSS de Blazor de ASP.NET Core