Delen via

ASP.NET Core Blazor statische bestanden

Notitie

Dit is niet de nieuwste versie van dit artikel. Zie de .NET 9-versie van dit artikelvoor de huidige release.

Waarschuwing

Deze versie van ASP.NET Core wordt niet meer ondersteund. Zie de .NET- en .NET Core-ondersteuningsbeleidvoor meer informatie. Zie de .NET 9-versie van dit artikelvoor de huidige release.

Belangrijk

Deze informatie heeft betrekking op een pre-releaseproduct dat aanzienlijk kan worden gewijzigd voordat het commercieel wordt uitgebracht. Microsoft geeft geen garanties, uitdrukkelijk of impliciet, met betrekking tot de informatie die hier wordt verstrekt.

Zie de .NET 9-versie van dit artikelvoor de huidige release.

In dit artikel wordt Blazor app-configuratie beschreven voor het leveren van statische bestanden.

Bekijk Statische bestanden in ASP.NET Core voor algemene informatie over het serveren van statische bestanden met routeringseindpunten voor statische assets voordat u dit artikel leest.

Vooraf geladen statische framework-assets

In Blazor Web Apps worden de statische assets van het framework automatisch vooraf geladen met behulp van Link headers, waardoor de browser bronnen kan preloaden voordat de eerste pagina wordt opgehaald en weergegeven.

In zelfstandige Blazor WebAssembly apps worden frameworkassets gepland voor het downloaden en het cachen met hoge prioriteit vroeg in de browserpagina-verwerking index.html wanneer:

  • De OverrideHtmlAssetPlaceholders eigenschap MSBuild in het projectbestand van de app (.csproj) is ingesteld op true:

    <PropertyGroup>
  <OverrideHtmlAssetPlaceholders>true</OverrideHtmlAssetPlaceholders>
</PropertyGroup>

  • Het volgende <link> element dat rel="preload" bevat is aanwezig in de <head> inhoud van wwwroot/index.html:

    <link rel="preload" id="webassembly" />

Levering van statische assets in Blazor-apps aan de serverzijde

Het leveren van statische assets wordt beheerd door routeringseindpuntconventies of een middleware die wordt beschreven in de volgende tabel.

Eigenschap API (Application Programming Interface) .NET-versie Beschrijving
Statische assets routerings-eindpuntconventies vaststellen MapStaticAssets .NET 9 of hoger Optimaliseert de levering van statische assets aan clients.
Statische bestands-middleware UseStaticFiles Alle .NET-versies Biedt statische assets aan klanten zonder de optimalisaties van 'Map Static Assets', maar is nuttig voor bepaalde taken die 'Map Static Assets' niet kan beheren.

Statische assets kunnen in de meeste situaties UseStaticFiles vervangen. Map Static Assets is echter geoptimaliseerd voor het leveren van de assets vanaf bekende locaties in de app tijdens de bouw- en publicatiefase. Als de app assets van andere locaties bedient, zoals schijf of ingesloten resources, moet UseStaticFiles worden gebruikt.

Statische assets in kaart brengen (MapStaticAssets) vervangt ook het aanroepen van UseBlazorFrameworkFiles in apps die Blazor WebAssembly frameworkbestanden leveren, en het expliciet aanroepen van UseBlazorFrameworkFiles in een Blazor Web App is niet nodig omdat de API automatisch wordt aangeroepen wanneer AddInteractiveWebAssemblyComponentswordt aangeroepen.

Wanneer Interactive WebAssembly- of Interactive Auto Render-modi zijn ingeschakeld:

  • Blazor maakt een eindpunt om de resourceverzameling beschikbaar te maken als een JS module.
  • De URL wordt verzonden naar de hoofdtekst van de aanvraag als persistente onderdeelstatus wanneer een WebAssembly-onderdeel wordt weergegeven op de pagina.
  • Tijdens het opstarten van WebAssembly haalt Blazor de URL op, importeert de module en roept een functie aan om de assetverzameling op te halen en te reconstrueren in het geheugen. De URL is specifiek voor de inhoud en voor altijd in de cache opgeslagen, dus deze overheadkosten worden slechts eenmaal per gebruiker betaald totdat de app wordt bijgewerkt.
  • De resourceverzameling wordt ook weergegeven op een door mensen leesbare URL (_framework/resource-collection.js), zodat JS toegang heeft tot de resourceverzameling voor verbeterde navigatie of om functies van andere frameworks en onderdelen van derden te implementeren.

Static File Middleware (UseStaticFiles) is handig in de volgende situaties die door Map Static Assets (MapStaticAssets) niet kunnen worden afgehandeld:

  • Bestanden leveren vanaf schijf die geen deel uitmaken van het build- of publicatieproces, bijvoorbeeld bestanden die tijdens of na de implementatie aan de toepassingsmap zijn toegevoegd.
  • Het toepassen van een padvoorvoegsel op Blazor WebAssembly statische asset-bestanden, zoals beschreven in de Prefix voor Blazor WebAssembly assets sectie.
  • Bestandstoewijzingen van extensies configureren voor specifieke inhoudstypen en het instellen van statische bestandsopties, die worden behandeld in de sectie Bestandstoewijzingen en statische bestandsopties sectie.

Zie Statische bestanden in ASP.NET Corevoor meer informatie.

Assets leveren volgens de conventies voor routering van statische assets bij eindpunten.

Deze sectie is van toepassing op Blazor apps aan de serverzijde.

Assets worden geleverd via de ComponentBase.Assets-eigenschap, die de gefingerprint-URL voor een bepaalde asset oplost. In het volgende voorbeeld zijn bootstrap, het Blazor projectsjabloon-app-opmaakmodel (app.css) en het CSS-isolatiemodel (op basis van de naamruimte van een app van BlazorSample) gekoppeld aan een hoofdonderdeel, meestal het App onderdeel (Components/App.razor):

<link rel="stylesheet" href="@Assets["bootstrap/bootstrap.min.css"]" />
<link rel="stylesheet" href="@Assets["app.css"]" />
<link rel="stylesheet" href="@Assets["BlazorSample.styles.css"]" />

ImportMap onderdeel

Deze sectie is van toepassing op Blazor Web Apps die MapRazorComponents aanroepen.

Het ImportMap onderdeel (ImportMap) vertegenwoordigt een importtoewijzingselement (<script type="importmap"></script>) dat de importtoewijzing voor modulescripts definieert. Het Importkaart-onderdeel wordt geplaatst in de inhoud van <head> van het hoofdonderdeel, meestal het App-onderdeel (Components/App.razor).

<ImportMap />

Als een aangepaste ImportMapDefinition niet is toegewezen aan een Import Map-component, wordt de import map gegenereerd op basis van de assets van de app.

Notitie

ImportMapDefinition exemplaren zijn duur om te maken, dus bevelen we aan ze te cachen wanneer er een extra exemplaar wordt gemaakt.

In de volgende voorbeelden ziet u aangepaste importtoewijzingsdefinities en de importtoewijzingen die ze maken.

Basis importkaart:

new ImportMapDefinition(
    new Dictionary<string, string>
    {
        { "jquery", "https://cdn.example.com/jquery.js" },
    },
    null,
    null);

De voorgaande code resulteert in de volgende importkaart:

{
  "imports": {
    "jquery": "https://cdn.example.com/jquery.js"
  }
}

Gescopeerde importmap

new ImportMapDefinition(
    null,
    new Dictionary<string, IReadOnlyDictionary<string, string>>
    {
        ["/scoped/"] = new Dictionary<string, string>
        {
            { "jquery", "https://cdn.example.com/jquery.js" },
        }
    },
    null);

De voorgaande code resulteert in de volgende importkaart:

{
  "scopes": {
    "/scoped/": {
      "jquery": "https://cdn.example.com/jquery.js"
    }
  }
}

Kaart importeren met integriteit:

new ImportMapDefinition(
    new Dictionary<string, string>
    {
        { "jquery", "https://cdn.example.com/jquery.js" },
    },
    null,
    new Dictionary<string, string>
    {
        { "https://cdn.example.com/jquery.js", "sha384-abc123" },
    });

De voorgaande code resulteert in de volgende importkaart:

{
  "imports": {
    "jquery": "https://cdn.example.com/jquery.js"
  },
  "integrity": {
    "https://cdn.example.com/jquery.js": "sha384-abc123"
  }
}

Combineer importtoewijzingen (ImportMapDefinition) met ImportMapDefinition.Combine.

Kaart importeren die is gemaakt op basis van een ResourceAssetCollection waarmee statische assets worden toegewezen aan de bijbehorende unieke URL's:

ImportMapDefinition.FromResourceCollection(
    new ResourceAssetCollection(
    [
        new ResourceAsset(
            "jquery.fingerprint.js",
            [
                new ResourceAssetProperty("integrity", "sha384-abc123"),
                new ResourceAssetProperty("label", "jquery.js"),
            ])
    ]));

De voorgaande code resulteert in de volgende importkaart:

{
  "imports": {
    "./jquery.js": "./jquery.fingerprint.js"
  },
  "integrity": {
    "jquery.fingerprint.js": "sha384-abc123"
  }
}

Schendingen van Content Security Policy (CSP) voor importmaps

Deze sectie is van toepassing op Blazor Web Apps die MapRazorComponents aanroepen.

Het ImportMap onderdeel wordt weergegeven als een inlinetag <script> , die een strikt CSP (Content Security Policy) schendt waarmee de default-src of script-src instructie wordt ingesteld.

Zie CSP-schendingen oplossen met Subresource Integrity (SRI) of een cryptografische nonce, voor voorbeelden van het oplossen van CSP-schendingen met Subresource Integrity (SRI) of een nonce.

Configureer Static File Middleware voor het leveren van statische assets aan clients door UseStaticFiles aan te roepen in de pijplijn voor aanvraagverwerking van de app. Zie Statische bestanden in ASP.NET Corevoor meer informatie.

In releases vóór .NET 8 worden statische bestanden van Blazor framework, zoals het Blazor-script, geleverd via Static File Middleware. In .NET 8 of hoger worden statische bestanden van het Blazor-framework toegewezen met behulp van endpointroutering en wordt Static File Middleware niet meer gebruikt.

Vingerafdruk statische assets aan de kant van de client in zelfstandige Blazor WebAssembly apps

In standalone Blazor WebAssembly apps overschrijft het framework tijdens het bouwen/publiceren tijdelijke aanduidingen in index.html met waarden die tijdens de build zijn berekend om statische assets voor rendering aan de clientzijde te vingerafdrukken. Een vingerafdruk wordt in de bestandsnaam van het blazor.webassembly.js script geplaatst en er wordt een importtoewijzing gegenereerd voor andere .NET-assets.

De volgende configuratie moet aanwezig zijn in het wwwwoot/index.html bestand van een zelfstandige Blazor WebAssembly app voor het aannemen van vingerafdrukken:

<head>
    ...
    <script type="importmap"></script>
    ...
</head>

<body>
    ...
    <script src="_framework/blazor.webassembly#[.{fingerprint}].js"></script>
    ...
</body>

</html>

In het projectbestand (.csproj) is de <OverrideHtmlAssetPlaceholders> eigenschap ingesteld op true:

<PropertyGroup>
  <OverrideHtmlAssetPlaceholders>true</OverrideHtmlAssetPlaceholders>
</PropertyGroup>

Bij het oplossen van importbewerkingen voor JavaScript-interop wordt de importtoewijzing gebruikt door de browser om bestanden met vingerafdrukken op te lossen.

Elk script in index.html met de vingerafdrukmarkering wordt door het framework gelabeld. Een scriptbestand met de naam scripts.js in de map van de app wwwroot/js wordt bijvoorbeeld geïdentificeerd door #[.{fingerprint}] toe te voegen vóór de bestandsextensie (.js):

<script src="js/scripts#[.{fingerprint}].js"></script>

Statische assets aan de clientzijde van vingerafdruk in Blazor Web Apps

Voor rendering aan de clientzijde (CSR) in Blazor Web Apps (Interactie Auto of Interactieve WebAssembly-rendermodi) wordt server-side fingerprinting voor statische middelen ingeschakeld door het adopteren van Map Static Assets routering eindpuntconventies (MapStaticAssets), ImportMap component en de ComponentBase.Assets eigenschap (@Assets["..."]). Zie Statische bestanden in ASP.NET Corevoor meer informatie.

Als u extra JavaScript-modules voor CSR wilt vingerafdruken, gebruikt u het <StaticWebAssetFingerprintPattern> item in het projectbestand van de app (.csproj). In het volgende voorbeeld wordt een vingerafdruk toegevoegd voor alle door de ontwikkelaar geleverde .mjs bestanden in de applicatie.

<ItemGroup>
  <StaticWebAssetFingerprintPattern Include="JSModule" Pattern="*.mjs" 
    Expression="#[.{fingerprint}]!" />
</ItemGroup>

Bij het oplossen van importbewerkingen voor JavaScript-interop wordt de importtoewijzing gebruikt door de browser om bestanden met vingerafdrukken op te lossen.

Deze sectie is van toepassing op alle .NET-releases en Blazor-apps.

De volgende tabellen bevatten een overzicht van statische <link>href indelingen per .NET-release.

Zie <head>voor de locatie van de Blazor-inhoud waar statistische bestandlinks worden geplaatst. Statische asset-links kunnen ook worden geleverd met gebruik van <HeadContent> componenten in afzonderlijke Razor componenten.

Zie <head>voor de locatie van de Blazor-inhoud waar statistische bestandlinks worden geplaatst.

.NET 9 of hoger

Type van app href Waarde Voorbeelden
Blazor Web App @Assets["{PATH}"] <link rel="stylesheet" href="@Assets["app.css"]" />
<link href="@Assets["_content/ComponentLib/styles.css"]" rel="stylesheet" />
Blazor Server† @Assets["{PATH}"] <link href="@Assets["css/site.css"]" rel="stylesheet" />
<link href="@Assets["_content/ComponentLib/styles.css"]" rel="stylesheet" />
Zelfstandige Blazor WebAssembly {PATH} <link rel="stylesheet" href="css/app.css" />
<link href="_content/ComponentLib/styles.css" rel="stylesheet" />

.NET 8.x

Type van app href Waarde Voorbeelden
Blazor Web App {PATH} <link rel="stylesheet" href="app.css" />
<link href="_content/ComponentLib/styles.css" rel="stylesheet" />
Blazor Server† {PATH} <link href="css/site.css" rel="stylesheet" />
<link href="_content/ComponentLib/styles.css" rel="stylesheet" />
Zelfstandige Blazor WebAssembly {PATH} <link rel="stylesheet" href="css/app.css" />
<link href="_content/ComponentLib/styles.css" rel="stylesheet" />

.NET 7.x of eerder

Type van app href Waarde Voorbeelden
Blazor Server† {PATH} <link href="css/site.css" rel="stylesheet" />
<link href="_content/ComponentLib/styles.css" rel="stylesheet" />
Gehost Blazor WebAssembly‡ {PATH} <link href="css/app.css" rel="stylesheet" />
<link href="_content/ComponentLib/styles.css" rel="stylesheet" />
Blazor WebAssembly {PATH} <link href="css/app.css" rel="stylesheet" />
<link href="_content/ComponentLib/styles.css" rel="stylesheet" />

†Blazor Server wordt ondersteund in .NET 8 of hoger, maar is geen projectsjabloon meer na .NET 7.
‡We raden u aan gehoste Blazor WebAssembly-apps bij te werken naar Blazor Web Appbij de overstap naar .NET 8 of hoger.

Statische modus voor webassetprojecten

Deze sectie is van toepassing op het .Client project van een Blazor Web App.

De vereiste <StaticWebAssetProjectMode>Default</StaticWebAssetProjectMode>-instelling in het .Client-project van een Blazor Web App zet het gedrag van statische activa terug naar de standaardwaarden, zodat het project zich gedraagt als een onderdeel van het gehoste project. De Blazor WebAssembly SDK (Microsoft.NET.Sdk.BlazorWebAssembly) configureert statische webassets op een specifieke manier om in de stand-alone modus te werken met een server die gebruikmaakt van de uitvoer van de bibliotheek. Dit is niet geschikt voor een Blazor Web App, waarbij het WebAssembly-gedeelte van de app een logisch onderdeel van de host is en zich meer moet gedragen als een bibliotheek. Het project maakt bijvoorbeeld de stijlenbundel (bijvoorbeeld BlazorSample.Client.styles.css) niet beschikbaar en levert in plaats daarvan alleen de host met de projectbundel, zodat de host deze kan opnemen in een eigen stijlenbundel.

Het wijzigen van de waarde (Default) van <StaticWebAssetProjectMode> of het verwijderen van de eigenschap uit het .Client project wordt niet ondersteund.

Voorvoegsel voor Blazor WebAssembly assets

Deze sectie is van toepassing op Blazor Web Apps.

Gebruik de WebAssemblyComponentsEndpointOptions.PathPrefix-eindpuntoptie om de padtekenreeks in te stellen die het voorvoegsel voor Blazor WebAssembly bestanden aangeeft. Het pad moet overeenkomen met een Blazor WebAssembly toepassingsproject waarnaar wordt verwezen.

endpoints.MapRazorComponents<App>()
    .AddInteractiveWebAssemblyRenderMode(options => 
        options.PathPrefix = "{PATH PREFIX}");

In het voorgaande voorbeeld is de tijdelijke aanduiding {PATH PREFIX} het padvoorvoegsel en moet beginnen met een voorwaartse schuine streep (/).

In het volgende voorbeeld is het padvoorvoegsel ingesteld op /path-prefix:

endpoints.MapRazorComponents<App>()
    .AddInteractiveWebAssemblyRenderMode(options => 
        options.PathPrefix = "/path-prefix");

Basispad voor statische webassets

Deze sectie is van toepassing op zelfstandige Blazor WebAssembly-apps.

Als de app wordt gepubliceerd, worden de statische assets van de app, inclusief Blazor frameworkbestanden (_framework mapassets), op het hoofdpad (/) in de gepubliceerde output geplaatst. De eigenschap <StaticWebAssetBasePath> die is opgegeven in het projectbestand (.csproj) stelt het basispad in op een niet-hoofdpad:

<PropertyGroup>
  <StaticWebAssetBasePath>{PATH}</StaticWebAssetBasePath>
</PropertyGroup>

In het voorgaande voorbeeld is de plaatsaanduiding {PATH} het pad.

Zonder de eigenschap <StaticWebAssetBasePath> in te stellen, wordt een zelfstandige app gepubliceerd op /BlazorStandaloneSample/bin/Release/{TFM}/publish/wwwroot/.

In het voorgaande voorbeeld is de {TFM} placeholder de Target Framework Moniker (TFM).

Als de eigenschap <StaticWebAssetBasePath> in een zelfstandige Blazor WebAssembly-app het pad van de gepubliceerde statische assets instelt op app1, wordt het hoofdpad naar de app in de gepubliceerde uitvoer /app1.

In het projectbestand van de zelfstandige Blazor WebAssembly-app (.csproj):

<PropertyGroup>
  <StaticWebAssetBasePath>app1</StaticWebAssetBasePath>
</PropertyGroup>

In gepubliceerde uitvoer is het pad naar de Blazor WebAssembly-zelfstandige app /BlazorStandaloneSample/bin/Release/{TFM}/publish/wwwroot/app1/.

In het voorgaande voorbeeld is de {TFM} placeholder de Target Framework Moniker (TFM).

Deze sectie is van toepassing op zelfstandige Blazor WebAssembly-apps en gehoste Blazor WebAssembly-oplossingen.

Als de app wordt gepubliceerd, worden de statische assets van de app, inclusief Blazor frameworkbestanden (_framework mapassets), op het hoofdpad (/) in de gepubliceerde output geplaatst. De eigenschap <StaticWebAssetBasePath> die is opgegeven in het projectbestand (.csproj) stelt het basispad in op een niet-hoofdpad:

<PropertyGroup>
  <StaticWebAssetBasePath>{PATH}</StaticWebAssetBasePath>
</PropertyGroup>

In het voorgaande voorbeeld is de plaatsaanduiding {PATH} het pad.

Zonder de eigenschap <StaticWebAssetBasePath> in te stellen, wordt de client-app van een gehoste oplossing of een zelfstandige app gepubliceerd op de volgende paden:

  • In het Server project van een gehoste Blazor WebAssembly-oplossing: /BlazorHostedSample/Server/bin/Release/{TFM}/publish/wwwroot/
  • In een zelfstandige Blazor WebAssembly-app: /BlazorStandaloneSample/bin/Release/{TFM}/publish/wwwroot/

Als de eigenschap <StaticWebAssetBasePath> in het Client project van een gehoste Blazor WebAssembly-app of in een zelfstandige Blazor WebAssembly-app het gepubliceerde statische assetpad instelt op app1, wordt het hoofdpad naar de app in gepubliceerde uitvoer /app1.

In het projectbestand van de Client-app (.csproj) of het projectbestand van de zelfstandige Blazor WebAssembly-app (.csproj):

<PropertyGroup>
  <StaticWebAssetBasePath>app1</StaticWebAssetBasePath>
</PropertyGroup>

In de gepubliceerde uitvoer:

  • Pad naar de client-app in het Server project van een gehoste Blazor WebAssembly-oplossing: /BlazorHostedSample/Server/bin/Release/{TFM}/publish/wwwroot/app1/
  • Pad naar een zelfstandige Blazor WebAssembly-app: /BlazorStandaloneSample/bin/Release/{TFM}/publish/wwwroot/app1/

De eigenschap <StaticWebAssetBasePath> wordt meestal gebruikt om de paden naar gepubliceerde statische assets van meerdere Blazor WebAssembly-apps in één gehoste implementatie te beheren. Zie Meerdere gehoste ASP.NET Core Blazor WebAssembly-appsvoor meer informatie. De eigenschap is ook effectief in zelfstandige Blazor WebAssembly apps.

In de voorgaande voorbeelden is de {TFM} plaatsaanduiding de Target Framework Moniker (TFM).

Bestandstoewijzingen en opties voor statische bestanden

Deze sectie is van toepassing op statische bestanden aan de serverzijde.

Als u extra bestandstoewijzingen wilt maken met een FileExtensionContentTypeProvider of andere StaticFileOptionswilt configureren, gebruikt u een van de volgende benaderingen. In de volgende voorbeelden is de tijdelijke aanduiding {EXTENSION} de bestandsextensie en is de tijdelijke aanduiding {CONTENT TYPE} het inhoudstype.

  • Configureer opties via afhankelijkheidsinjectie (DI) in het Program-bestand met behulp van StaticFileOptions:

    using Microsoft.AspNetCore.StaticFiles;

...

var provider = new FileExtensionContentTypeProvider();
provider.Mappings["{EXTENSION}"] = "{CONTENT TYPE}";

builder.Services.Configure<StaticFileOptions>(options =>
{
    options.ContentTypeProvider = provider;
});

    Met deze methode configureert u dezelfde bestandsprovider die wordt gebruikt voor het Blazor script. Zorg ervoor dat uw aangepaste configuratie geen invloed heeft op het leveren van het Blazor script. Verwijder bijvoorbeeld niet de toewijzing voor JavaScript-bestanden door met provider.Mappings.Remove(".js")de provider te configureren.

  • Gebruik twee aanroepen naar UseStaticFiles in het Program-bestand.

    • Configureer de aangepaste bestandsprovider in de eerste aanroep met StaticFileOptions.
    • De tweede middleware dient het Blazor script, dat gebruikmaakt van de standaardconfiguratie voor statische bestanden die wordt geleverd door het Blazor-framework.
    using Microsoft.AspNetCore.StaticFiles;

...

var provider = new FileExtensionContentTypeProvider();
provider.Mappings["{EXTENSION}"] = "{CONTENT TYPE}";

app.UseStaticFiles(new StaticFileOptions { ContentTypeProvider = provider });
app.UseStaticFiles();

  • U kunt voorkomen dat de dienstverlening van _framework/blazor.server.js wordt verstoord door met MapWhen een aangepaste statische bestandsmiddleware uit te voeren.

    app.MapWhen(ctx => !ctx.Request.Path
    .StartsWithSegments("/_framework/blazor.server.js"),
        subApp => subApp.UseStaticFiles(new StaticFileOptions() { ... }));

Bestanden vanaf meerdere locaties leveren

De richtlijnen in deze sectie zijn alleen van toepassing op Blazor Web Apps.

Bestanden vanaf meerdere locaties aanbieden met een CompositeFileProvider:

Voorbeeld:

Maak een nieuwe map in het serverproject met de naam AdditionalStaticAssets. Plaats een afbeelding in de map.

Voeg de volgende using-instructie toe aan het begin van het Program-bestand van het serverproject:

using Microsoft.Extensions.FileProviders;

Voeg de volgende code toe in het Program-bestand van het serverproject voordat de aanroep naar UseStaticFiles:

var secondaryProvider = new PhysicalFileProvider(
    Path.Combine(builder.Environment.ContentRootPath, "AdditionalStaticAssets"));
app.Environment.WebRootFileProvider = new CompositeFileProvider(
    app.Environment.WebRootFileProvider, secondaryProvider);

Verwijs in het Home-onderdeel (Home.razor) van de app naar de afbeelding met een <img> tag:

<img src="{IMAGE FILE NAME}" alt="{ALT TEXT}" />

In het voorgaande voorbeeld:

  • De tijdelijke aanduiding {IMAGE FILE NAME} is de naam van het afbeeldingsbestand. U hoeft geen padsegment op te geven als het afbeeldingsbestand zich in de hoofdmap van de map AdditionalStaticAssets bevindt.
  • De tijdelijke aanduiding {ALT TEXT} is de alternatieve tekst voor de afbeelding.

Voer de app uit.

Aanvullende bronnen