Observação
O acesso a essa página exige autorização. Você pode tentar entrar ou alterar diretórios.
O acesso a essa página exige autorização. Você pode tentar alterar os diretórios.
Observação
Esta não é a versão mais recente deste artigo. Para obter a versão mais recente deste artigo, consulte a versão do .NET 7.
Este artigo explica como configurar um aplicativo hospedado Blazor WebAssembly para hospedar vários Blazor WebAssembly aplicativos.
Configuração
Selecione a versão deste artigo que corresponde aos seus requisitos de hospedagem, hospedagem de porta/domínio (por exemplo, :5001/:5002 ou firstapp.com/secondapp.com) ou hospedagem de subcaminho de rota (por exemplo, /FirstApp e )./SecondApp
Com a seleção de hospedagem atual, este artigo aborda a hospedagem de porta/domínio (por exemplo, :5001/:5002 ou ).firstapp.com/secondapp.com
Nos seguintes exemplos:
- O nome do projeto do aplicativo hospedado Blazor WebAssembly está
MultipleBlazorAppsem uma pasta chamadaMultipleBlazorApps. - Os três projetos na solução antes de um segundo aplicativo cliente ser adicionado estão
MultipleBlazorApps.ClientnaClientpasta,MultipleBlazorApps.ServernaServerpasta eMultipleBlazorApps.SharednaSharedpasta. - O aplicativo cliente inicial (primeiro) é o projeto cliente padrão da solução criada a partir do Blazor WebAssembly modelo de projeto.
- Um segundo aplicativo cliente é adicionado à solução,
MultipleBlazorApps.SecondClientem uma pasta chamadaSecondClient. - Opcionalmente, o projeto do servidor (
MultipleBlazorApps.Server) pode servir páginas ou exibições como um Razor aplicativo Pages ou MVC. - O primeiro aplicativo cliente é acessível em um navegador na porta 5001 ou com um host de
firstapp.com. O segundo aplicativo cliente é acessível em um navegador na porta 5002 ou com um host desecondapp.com.
Com a seleção atual, este artigo aborda a hospedagem de subcaminho de rota (por exemplo, /FirstApp e /SecondApp).
Nos seguintes exemplos:
- O nome do projeto do aplicativo hospedado Blazor WebAssembly está
MultipleBlazorAppsem uma pasta chamadaMultipleBlazorApps. - Os três projetos na solução antes de um segundo aplicativo cliente ser adicionado estão
MultipleBlazorApps.ClientnaClientpasta,MultipleBlazorApps.ServernaServerpasta eMultipleBlazorApps.SharednaSharedpasta. - O aplicativo cliente inicial (primeiro) é o projeto cliente padrão da solução criada a partir do Blazor WebAssembly modelo de projeto.
- Um segundo aplicativo cliente é adicionado à solução,
MultipleBlazorApps.SecondClientem uma pasta chamadaSecondClient. - Opcionalmente, o projeto do servidor (
MultipleBlazorApps.Server) pode servir páginas ou exibições como páginas formais Razor ou aplicativo MVC. - Ambos os aplicativos cliente usam a porta padrão definida pelo
MultipleBlazorApps.Serverarquivo doProperties/launchSettings.jsonprojeto em seuapplicationUrlvalor. O primeiro aplicativo cliente é acessível em um navegador no/FirstAppsubcaminho. O segundo aplicativo cliente é acessível em um navegador no/SecondAppsubcaminho.
Os exemplos mostrados neste artigo exigem configuração adicional para:
- Acessando os aplicativos diretamente nos domínios
firstapp.comde host de exemplo esecondapp.com. - Certificados para os aplicativos cliente para habilitar a segurança TLS/HTTPS.
- Configurando o aplicativo de servidor como um Razor aplicativo Pages para os seguintes recursos:
- Integração de Razor componentes em páginas ou exibições.
- Componentes de pré-geração Razor .
As configurações anteriores estão além do escopo deste artigo. Para obter mais informações, consulte os seguintes recursos:
- Hospedar e implantar o ASP.NET Core
- Impor HTTPS no ASP.NET Core
- Integrar componentes do ASP.NET Core Razor ao MVC ou Razor páginas em soluções hospedadas Blazor WebAssembly
Use uma Blazor WebAssembly hospedada existente ou crie uma nova solução hospedada Blazor WebAssembly a Blazor WebAssembly partir do modelo de projeto passando a opção -ho|--hosted se estiver usando a CLI do .NET ou selecionando a caixa de seleção ASP.NET Core Hospedado no Visual Studio quando o projeto for criado no IDE.
Use uma pasta para a solução nomeada MultipleBlazorApps e nomeie o projeto MultipleBlazorApps.
Crie uma nova pasta na solução chamada SecondClient. Na nova pasta, adicione um segundo Blazor WebAssembly aplicativo cliente chamado MultipleBlazorApps.SecondClient. Adicione o projeto como um aplicativo autônomo Blazor WebAssembly . Para criar um aplicativo autônomo Blazor WebAssembly , não passe a opção -ho|--hosted se estiver usando a CLI do .NET ou não usar a caixa de seleção ASP.NET Core Hospedado se estiver usando o Visual Studio.
Faça as seguintes alterações no MultipleBlazorApps.SecondClient projeto:
- Copie o
FetchDatacomponente (Pages/FetchData.razor) daClient/Pagespasta para aSecondClient/Pagespasta. Essa etapa é necessária porque um aplicativo autônomo Blazor WebAssembly não chama o controlador de um Server projeto para dados meteorológicos, ele usa um arquivo de dados estáticos. Ao copiar oFetchDatacomponente para o projeto adicionado, o segundo aplicativo cliente também faz uma chamada à API Web para a API do servidor para dados meteorológicos. - Exclua a
SecondClient/wwwroot/sample-datapasta, pois oweather.jsonarquivo na pasta não é usado.
A tabela a seguir descreve as pastas e os nomes de projeto da solução depois que a pasta e SecondClient o MultipleBlazorApps.SecondClient projeto são adicionados.
| Pasta física | Nome do projeto | Description |
|---|---|---|
Client |
MultipleBlazorApps.Client |
Blazor WebAssembly aplicativo cliente |
SecondClient |
MultipleBlazorApps.SecondClient |
Blazor WebAssembly aplicativo cliente |
Server |
MultipleBlazorApps.Server |
aplicativo de servidor ASP.NET Core |
Shared |
MultipleBlazorApps.Shared |
Projeto de recursos compartilhados |
O MultipleBlazorApps.Server projeto atende aos dois Blazor WebAssembly aplicativos cliente e fornece dados meteorológicos para os componentes dos FetchData aplicativos cliente por meio de um controlador MVC. Opcionalmente, o MultipleBlazorApps.Server projeto também pode servir páginas ou exibições, como um aplicativo MVC ou páginas tradicionais Razor . As etapas para habilitar o serviço de páginas ou exibições são abordadas posteriormente neste artigo.
Observação
A demonstração neste artigo usa nomes estáticos de caminho de FirstApp ativo da Web para o MultipleBlazorApps.Client projeto e SecondApp para o MultipleBlazorApps.SecondClient projeto. Os nomes "FirstApp" e "SecondApp" são apenas para fins de demonstração. Outros nomes são aceitáveis para distinguir os aplicativos cliente, comoApp1/App2, , Client1/Client2ou 1/2qualquer esquema de nomenclatura semelhante.
Ao rotear solicitações para os aplicativos cliente por uma porta ou um domínio, "FirstApp" e "SecondApp" são usados internamente para rotear solicitações e fornecer respostas para ativos estáticos e não são vistos na barra de endereços do navegador.
Observação
A demonstração neste artigo usa nomes estáticos de caminho de FirstApp ativo da Web para o MultipleBlazorApps.Client projeto e SecondApp para o MultipleBlazorApps.SecondClient projeto. Os nomes "FirstApp" e "SecondApp" são apenas para fins de demonstração. Outros nomes são aceitáveis para distinguir os aplicativos cliente, comoApp1/App2, , Client1/Client2ou 1/2qualquer esquema de nomenclatura semelhante.
"FirstApp" e "SecondApp" também aparecem na barra de endereços do navegador porque as solicitações são roteados para os dois aplicativos cliente usando esses nomes. Outros segmentos de rota de URL válidos têm suporte e os segmentos de rota não precisam corresponder estritamente aos nomes usados para rotear ativos Web estáticos internamente. Usar "FirstApp" e "SecondApp" para o roteamento interno de ativos estáticos e o roteamento de solicitação de aplicativo é apenas para convenções nos exemplos deste artigo.
No arquivo de projeto do primeiro aplicativo cliente (MultipleBlazorApps.Client.csproj), adicione uma <StaticWebAssetBasePath> propriedade a um <PropertyGroup> com um valor de FirstApp definir o caminho base para os ativos estáticos do projeto:
<StaticWebAssetBasePath>FirstApp</StaticWebAssetBasePath>
MultipleBlazorApps.SecondClient No arquivo de projeto do aplicativo (MultipleBlazorApps.SecondClient.csproj):
Adicione uma
<StaticWebAssetBasePath>propriedade a um<PropertyGroup>com um valor deSecondApp:<StaticWebAssetBasePath>SecondApp</StaticWebAssetBasePath>Adicionar uma referência de projeto para o
MultipleBlazorApps.Sharedprojeto a um<ItemGroup>:<ItemGroup> <ProjectReference Include="..\Shared\MultipleBlazorApps.Shared.csproj" /> </ItemGroup>
No arquivo de projeto do aplicativo de servidor (Server/MultipleBlazorApps.Server.csproj), crie uma referência de projeto para o aplicativo cliente adicionado MultipleBlazorApps.SecondClient em um <ItemGroup>:
<ProjectReference Include="..\SecondClient\MultipleBlazorApps.SecondClient.csproj" />
No arquivo do aplicativo de Properties/launchSettings.json servidor, configure o applicationUrlKestrel perfil (MultipleBlazorApps.Server) para acessar os aplicativos cliente nas portas 5001 e 5002. Se você configurar seu ambiente local para usar os domínios de exemplo, as URLs applicationUrl poderão usar firstapp.com e secondapp.com não usar as portas.
Observação
O uso de portas nesta demonstração permite acesso aos projetos cliente em um navegador local sem a necessidade de configurar um ambiente de hospedagem local para que os navegadores da Web possam acessar os aplicativos cliente por meio das configurações firstapp.com do host e secondapp.com. Em cenários de produção, uma configuração típica é usar subdomínios para distinguir os aplicativos cliente.
Por exemplo:
- As portas são removidas da configuração dessa demonstração.
- Os hosts são alterados para usar subdomínios, como
www.contoso.compara visitantes do site eadmin.contoso.compara administradores. - Hosts adicionais podem ser incluídos para aplicativos cliente adicionais, e pelo menos mais um host é necessário se o aplicativo de servidor também for um Razor aplicativo Pages ou MVC que serve páginas ou exibições.
Se você planeja fornecer páginas ou exibições do aplicativo do servidor, use a seguinte applicationUrl configuração no arquivo, que Properties/launchSettings.json permite o seguinte acesso:
- Opcionalmente, o Razor aplicativo Pages ou MVC (
MultipleBlazorApps.Serverprojeto) responde às solicitações na porta 5000. - As respostas às solicitações para o primeiro cliente (
MultipleBlazorApps.Clientprojeto) estão na porta 5001. - As respostas às solicitações para o segundo cliente (
MultipleBlazorApps.SecondClientprojeto) estão na porta 5002.
"applicationUrl": "https://localhost:5000;https://localhost:5001;https://localhost:5002",
Se você não planeja que o aplicativo do servidor atenda a páginas ou exibições e atenda apenas aos Blazor WebAssembly aplicativos cliente, use a seguinte configuração, que permite o seguinte acesso:
- O primeiro aplicativo cliente responde na porta 5001.
- O segundo aplicativo cliente responde na porta 5002.
"applicationUrl": "https://localhost:5001;https://localhost:5002",
No arquivo do aplicativo de Program.cs servidor, remova o código a seguir, que aparece após a chamada para UseHttpsRedirection:
Se você planeja fornecer páginas ou exibições do aplicativo de servidor, exclua as seguintes linhas de código:
- app.UseBlazorFrameworkFiles();- app.MapFallbackToFile("index.html");Se você planeja que o aplicativo do servidor atenda apenas aos Blazor WebAssembly aplicativos cliente, exclua o seguinte código:
- app.UseBlazorFrameworkFiles(); ... - app.UseRouting(); - app.MapRazorPages(); - app.MapControllers(); - app.MapFallbackToFile("index.html");Deixe o middleware de arquivo estático no lugar:
app.UseStaticFiles();
Adicione middleware que mapeia solicitações aos aplicativos cliente. O exemplo a seguir configura o middleware a ser executado quando a porta de solicitação for 5001 para o primeiro aplicativo cliente ou 5002 para o segundo aplicativo cliente ou o host de solicitação for
firstapp.compara o primeiro aplicativo cliente ousecondapp.compara o segundo aplicativo cliente.Observação
O uso dos hosts (
firstapp.com/secondapp.com) em um sistema local com um navegador local requer uma configuração adicional além do escopo deste artigo. Para testes locais desse cenário, recomendamos o uso de portas. Aplicativos de produção típicos são configurados para usar subdomínios, comowww.contoso.compara visitantes do site eadmin.contoso.compara administradores. Com a configuração adequada do DNS e do servidor, que está além do escopo deste artigo e depende das tecnologias usadas, o aplicativo responde a solicitações em quaisquer hosts nomeados no código a seguir.De onde você removeu a
app.UseBlazorFrameworkFiles();linhaProgram.cs, coloque o seguinte código: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"); }); });Aviso
Uma API que dependa do cabeçalho de host, como HttpRequest.Host e RequireHost, está sujeita a possíveis falsificações por clientes.
Para evitar falsificação de host e porta, use uma das seguintes abordagens:
- Use HttpContext.Connection (ConnectionInfo.LocalPort) onde as portas são verificadas.
- Empregar filtragem de host.
Adicione middleware que mapeia solicitações aos aplicativos cliente. O exemplo a seguir configura o middleware a ser executado quando o subcaminho de solicitação for
/FirstApppara o primeiro aplicativo cliente ou/SecondApppara o segundo aplicativo cliente.De onde você removeu a
app.UseBlazorFrameworkFiles();linhaProgram.cs, coloque o seguinte código: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"); }); });Defina o caminho base em cada aplicativo cliente:
No arquivo do
index.htmlprimeiro aplicativo cliente (Client/wwwroot/index.html), atualize o valor da<base>marca para refletir o subcaminho. A barra à direita é necessária:<base href="/FirstApp/" />No arquivo do segundo aplicativo cliente (
index.html), atualize o valor daSecondClient/wwwroot/index.html<base>marca para refletir o subcaminho. A barra à direita é necessária:<base href="/SecondApp/" />
Para obter mais informações sobreUseStaticFiles, consulte ASP.NET Arquivos estáticos principaisBlazor.
Para obter mais informações sobre UseBlazorFrameworkFiles e MapFallbackToFile, confira os seguintes recursos:
- Microsoft.AspNetCore.Builder.ComponentsWebAssemblyApplicationBuilderExtensions.UseBlazorFrameworkFiles (fonte de referência)
- Microsoft.AspNetCore.Builder.StaticFilesEndpointRouteBuilderExtensions.MapFallbackToFile (fonte de referência)
Observação
Os links de documentação para o código fonte de referência do .NET geralmente carregam a ramificação padrão do repositório, que representa o desenvolvimento atual para a próxima versão do .NET. Para selecionar uma marca para uma versão específica, use a lista suspensa para Alternar branches ou marcas. Para saber mais, confira Como selecionar uma marca de versão do código-fonte do ASP.NET Core (dotnet/AspNetCore.Docs #26205).
As solicitações dos aplicativos cliente para /WeatherForecast a API do servidor são para /FirstApp/WeatherForecast ou /SecondApp/WeatherForecast dependendo de qual aplicativo cliente faz a solicitação. Portanto, as rotas do controlador que retornam dados meteorológicos da API do servidor exigem uma modificação para incluir os segmentos de caminho.
No controlador de previsão do tempo do aplicativo de servidor (Controllers/WeatherForecastController.cs), substitua a rota existente ([Route("[controller]")]) pelas WeatherForecastController seguintes rotas, que levam em conta os caminhos de solicitação do cliente:
[Route("FirstApp/[controller]")]
[Route("SecondApp/[controller]")]
Se você planeja servir páginas do aplicativo do servidor, adicione uma IndexRazor página à Pages pasta do aplicativo do 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()
{
}
}
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
namespace MultipleBlazorApps.Server.Pages
{
public class IndexModel : PageModel
{
public void OnGet()
{
}
}
}
Observação
A página anterior Index é um exemplo mínimo puramente para fins de demonstração. Se o aplicativo exigir ativos de Páginas adicionais Razor , como um layout, estilos, scripts e importações, obtenha-os de um aplicativo criado a partir do Razor modelo de projeto Pages. Para obter mais informações, consulte Razor arquitetura e conceitos de Páginas no ASP.NET Core.
Se você planeja fornecer exibições MVC do aplicativo do servidor, adicione um modo de exibição Index e um Home controlador:
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() => View();
}
Observação
O modo de exibição anterior Index é um exemplo mínimo puramente para fins de demonstração. Se o aplicativo exigir ativos MVC adicionais, como um layout, estilos, scripts e importações, obtenha-os de um aplicativo criado a partir do modelo de projeto do MVC. Para obter mais informações, consulte Introdução ao ASP.NET Core MVC.
Para obter mais informações sobre como usar os Razor componentes de qualquer um dos aplicativos cliente em páginas ou exibições do aplicativo de servidor, consulte Integrar componentes do ASP.NET Core Razor com MVC ou Razor Páginas em soluções hospedadasBlazor WebAssembly.
Executar o aplicativo
Execute o MultipleBlazorApps.Server projeto:
- Acesse o aplicativo cliente inicial em
https://localhost:5001. - Acesse o aplicativo cliente adicionado em
https://localhost:5002. - Se o aplicativo de servidor estiver configurado para servir páginas ou exibições, acesse a página ou exibição
Indexemhttps://localhost:5000.
- Acesse o aplicativo cliente inicial em
https://localhost:{DEFAULT PORT}/FirstApp. - Acesse o aplicativo cliente adicionado em
https://localhost:{DEFAULT PORT}/SecondApp. - Se o aplicativo de servidor estiver configurado para servir páginas ou exibições, acesse a página ou exibição
Indexemhttps://localhost:{DEFAULT PORT}.
Nas URLs de exemplo anteriores, o {DEFAULT PORT} espaço reservado é a porta padrão definida pelo MultipleBlazorApps.Server arquivo do Properties/launchSettings.json projeto em seu applicationUrl valor.
Importante
Ao executar o aplicativo com o dotnet watch comando (ou dotnet run) (CLI do .NET), confirme se o shell de comando está aberto na Server pasta da solução.
Ao usar o botão iniciar do Visual Studio para executar o aplicativo, confirme se o MultipleBlazorApps.Server projeto está definido como o projeto de inicialização (realçado no Gerenciador de Soluções).
Ativos estáticos
Quando um ativo estiver na pasta de um aplicativo cliente, forneça o caminho de wwwroot solicitação de ativo estático nos componentes:
<img alt="..." src="{PATH AND FILE NAME}" />
O espaço reservado {PATH AND FILE NAME} é o caminho e o nome do arquivo em wwwroot.
Por exemplo, a origem de uma imagem do Jeep (jeep-yj.png) na vehicle pasta de wwwroot:
<img alt="Jeep Wrangler YJ" src="vehicle/jeep-yj.png" />
Razor Suporte à RCL (biblioteca de classes)
Adicione a Razor RCL (biblioteca de classes) à solução como um novo projeto:
- Clique com o botão direito do mouse na solução no Gerenciador de Soluções e selecione Adicionar>Novo Projeto.
- Use o modelo de projeto da Biblioteca de Classes para criar o projeto.Razor Os exemplos nesta seção usam o nome
ComponentLibrarydo projeto, que também é o nome do assembly da RCL. Não selecione a caixa de seleção páginas de suporte e exibições .
Para cada aplicativo cliente hospedado Blazor WebAssembly , crie uma referência de projeto para o projeto RCL clicando com o botão direito do mouse em cada projeto cliente no Gerenciador de Soluções e selecionando Adicionar>Referência do Projeto.
Use componentes da RCL nos aplicativos cliente com qualquer uma das seguintes abordagens:
Coloque uma
@usingdiretiva na parte superior do componente para o namespace da RCL e adicione Razor sintaxe ao componente. O exemplo a seguir é para uma RCL com o nomeComponentLibrarydo assembly:@using ComponentLibrary ... <Component1 />Forneça o namespace da RCL junto com a Razor sintaxe do componente. Essa abordagem não requer uma
@usingdiretiva na parte superior do arquivo de componente. O exemplo a seguir é para uma RCL com o nomeComponentLibrarydo assembly:<ComponentLibrary.Component1 />
Observação
Uma @using diretiva também pode ser colocada no arquivo de _Import.razor cada aplicativo cliente, o que torna o namespace da RCL globalmente disponível para componentes nesse projeto.
Quando qualquer outro ativo estático estiver na wwwroot pasta de uma RCL, faça referência ao ativo estático em um aplicativo cliente de acordo com as diretrizes da interface do usuário reutilizável Razor em bibliotecas de classes com o ASP.NET Core:
<img alt="..." src="_content/{PACKAGE ID}/{PATH AND FILE NAME}" />
O {PACKAGE ID} espaço reservado é a ID do pacote da RCL. A ID do pacote terá como valor padrão o nome do assembly do projeto, se <PackageId> não for especificado no arquivo de projeto. O {PATH AND FILE NAME} espaço reservado é o caminho e o nome do arquivo em wwwroot.
O exemplo a seguir mostra a marcação de uma imagem do Jeep (jeep-yj.png) na vehicle pasta da pasta da wwwroot RCL. O exemplo a seguir é para uma RCL com o nome ComponentLibrarydo assembly:
<img alt="Jeep Wrangler YJ" src="_content/ComponentLibrary/vehicle/jeep-yj.png" />