Aracılığıyla paylaş

ASP.NET Core Blazor statik dosyaları

  • Makale

Not

Bu, bu makalenin en son sürümü değildir. Geçerli sürüm için bu makalenin .NET 8 sürümüne bakın.

Uyarı

ASP.NET Core'un bu sürümü artık desteklenmiyor. Daha fazla bilgi için bkz . .NET ve .NET Core Destek İlkesi. Geçerli sürüm için bu makalenin .NET 8 sürümüne bakın.

Önemli

Bu bilgiler, ticari olarak piyasaya sürülmeden önce önemli ölçüde değiştirilebilen bir yayın öncesi ürünle ilgilidir. Burada verilen bilgilerle ilgili olarak Microsoft açık veya zımni hiçbir garanti vermez.

Geçerli sürüm için bu makalenin .NET 8 sürümüne bakın.

Bu makalede statik dosyalara hizmet veren uygulama yapılandırması açıklanmaktadır Blazor .

Sunucu tarafı Blazor uygulamalarda statik varlık teslimi

Statik varlıklara hizmet sunma, yönlendirme uç noktası kuralları veya aşağıdaki tabloda açıklanan ara yazılım tarafından yönetilir.

Özellik API .NET Sürümü Açıklama
Statik Varlıklar yönlendirme uç noktası kurallarını eşleme MapStaticAssets .NET 9 veya üzeri Statik varlıkların istemcilere teslimini iyileştirir.
Statik Dosyalar Ara Yazılımı UseStaticFiles Tüm .NET sürümleri Statik Varlıkları Eşle iyileştirmeleri olmadan istemcilere statik varlıklar sunar, ancak Statik Varlıkları Eşle'nin yönetemeye uygun olmadığı bazı görevler için kullanışlıdır.

Aşağıdaki işlemleri gerçekleştiren uygulamanın istek işleme işlem hattında çağrı MapStaticAssets yaparak Statik Varlıkları Eşleme'yi yapılandırın:

Statik Varlıkları Eşleme, uygulamadaki statik varlıklar hakkında bilgi toplamak için derleme ve yayımlama işlemlerini birleştirerek çalışır. Bu bilgiler, statik varlıkları tarayıcılara verimli bir şekilde sunmak için çalışma zamanı kitaplığı tarafından kullanılır.

Statik Varlıkları Eşleme çoğu durumda değiştirilebilir UseStaticFiles . Ancak, Statik Varlıkları Eşleme özelliği, derleme ve yayımlama zamanında uygulamadaki bilinen konumlardan gelen varlıkların sunulması için iyileştirilmiştir. Uygulama disk veya ekli kaynaklar UseStaticFiles gibi diğer konumlardan varlıklara hizmet verirse kullanılmalıdır.

Statik Varlıkları Eşleme (MapStaticAssets), çerçeve dosyalarına hizmet Blazor WebAssembly veren uygulamalarda yapılan çağrıların UseBlazorFrameworkFiles yerini alır ve çağrılırken AddInteractiveWebAssemblyComponentsAPI otomatik olarak çağrıldığından açıkça içinde Blazor Web App çağırma UseBlazorFrameworkFiles gerekli değildir.

Statik Varlıkları Eşleme, çağrılırken UseStaticFileskullanılamayabilecek aşağıdaki avantajları sağlar:

  • JavaScript (JS) ve stil sayfaları dahil ancak zaten sıkıştırılmış görüntü ve yazı tipi varlıkları hariç olmak üzere uygulamadaki tüm varlıklar için derleme zamanı sıkıştırması. Gzip (Content-Encoding: gz) sıkıştırması geliştirme sırasında kullanılır. Yayımlama sırasında Brotli (Content-Encoding: br) sıkıştırmalı Gzip kullanılır.
  • Her dosyanın içeriğinin SHA-256 karmasının Base64 kodlanmış dizesiyle derleme zamanında tüm varlıklar için parmak izi oluşturma. Bu, eski dosya önbelleğe alınmış olsa bile dosyanın eski bir sürümünün yeniden kullanılabilir olmasını önler. Parmak izi alınmış varlıklar yönergesi immutablekullanılarak önbelleğe alınır ve bu da tarayıcının değişene kadar varlığı bir daha istemesine neden olmaz. Yönergesini desteklemeyen tarayıcılar için immutable bir max-age yönerge eklenir.
    • Bir varlığın parmak izi oluşturulmamış olsa bile, her statik varlık için değer olarak ETag dosyanın parmak izi karması kullanılarak içerik ETags oluşturulur. Bu, tarayıcının yalnızca içeriği değiştiğinde (veya dosya ilk kez indiriliyorsa) dosyayı indirmesini sağlar.
    • Dahili olarak, Blazor fiziksel varlıkları parmak izleriyle eşler ve bu da uygulamanın şunları yapmasını sağlar:
      • 'nin CSS yalıtım özelliği için Blazorbileşen kapsamlı CSS gibi Razor otomatik olarak oluşturulan Blazor varlıkları ve JS içeri aktarma eşlemeleri tarafından JS açıklanan varlıkları bulun.
      • Varlıkları önceden yüklemek için sayfanın içeriğinde <head> bağlantı etiketleri oluşturun.
  • Visual Studio Çalışırken Yeniden Yükleme geliştirme testi sırasında:
    • Uygulama çalışırken bir dosya değiştirildiğinde sorun yaşamamak için varlıklardan bütünlük bilgileri kaldırılır.
    • Tarayıcının her zaman geçerli içeriği aldığından emin olmak için statik varlıklar önbelleğe alınmaz.

Etkileşimli WebAssembly veya Etkileşimli Otomatik işleme modları etkinleştirildiğinde:

  • Blazor kaynak koleksiyonunu modül olarak kullanıma sunan bir JS uç nokta oluşturur.
  • Url, webassembly bileşeni sayfaya işlendiğinde kalıcı bileşen durumu olarak isteğin gövdesine gönderilir.
  • WebAssembly önyüklemesi sırasında URL'yi alır, Blazor modülü içeri aktarır ve varlık koleksiyonunu almak ve bellekte yeniden yapılandırmak için bir işlev çağırır. URL içeriğe özeldir ve sonsuza kadar önbelleğe alınır, bu nedenle bu ek yük maliyeti uygulama güncelleştirilene kadar kullanıcı başına yalnızca bir kez ödenir.
  • Kaynak koleksiyonu da insan tarafından okunabilir bir URL' de (_framework/resource-collection.js ) kullanıma sunulur, bu nedenle JS gelişmiş gezinti için kaynak koleksiyonuna veya diğer çerçevelerin ve üçüncü taraf bileşenlerinin özelliklerini uygulamaya erişime sahiptir.

Eşleme Statik Varlıkları, küçültme veya diğer dosya dönüştürmeleri için özellikler sağlamaz. Küçültme genellikle özel kod veya üçüncü taraf araçlarıyla işlenir.

Statik Dosya Ara Yazılımı (), Statik Varlıkları Eşleme'nin (UseStaticFilesMapStaticAssets) işleyebildiği aşağıdaki durumlarda kullanışlıdır:

Daha fazla bilgi için, bkz. ASP.NET Core statik dosyaları.

Statik Varlıkları Eşleme yönlendirme uç noktası kurallarıyla varlıkları teslim edin

Bu bölüm sunucu tarafı Blazor uygulamalar için geçerlidir.

Varlıklar, belirli bir varlığın ComponentBase.Assets parmak izi uygulanmış URL'sini çözümleyen özellik aracılığıyla teslim edilir. Aşağıdaki örnekte Bootstrap, Blazor proje şablonu uygulama stil sayfası (app.css) ve CSS yalıtım stil sayfası (bir uygulamanın ad alanına BlazorSamplegöre) bir kök bileşene(genellikle App bileşene)Components/App.razor bağlanır:

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

Haritaları içeri aktarma

Bu bölüm sunucu tarafı Blazor uygulamalar için geçerlidir.

Haritayı İçeri Aktar bileşeni (ImportMap), modül betikleri için içeri aktarma eşlemesini tanımlayan bir içeri aktarma eşleme öğesini (<script type="importmap"></script>) temsil eder. Haritayı İçeri Aktar bileşeni, genellikle bileşen (Components/App.razor) olan kök bileşenin içeriğine App yerleştirilir<head>.

<ImportMap />

İçeri Aktarma Eşlemesi bileşenine özel ImportMapDefinition bir atanmamışsa, içeri aktarma eşlemesi uygulamanın varlıklarına göre oluşturulur.

Aşağıdaki örneklerde özel içeri aktarma eşleme tanımları ve oluşturdukları içeri aktarma eşlemeleri gösterilmektedir.

Temel içeri aktarma haritası:

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

Yukarıdaki kod aşağıdaki içeri aktarma eşlemesine neden olur:

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

Kapsamlı içeri aktarma eşlemesi:

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

Yukarıdaki kod aşağıdaki içeri aktarma eşlemesine neden olur:

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

Haritayı bütünlükle içeri aktarma:

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" },
    });

Yukarıdaki kod aşağıdaki içeri aktarma eşlemesine neden olur:

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

İçeri aktarma eşleme tanımlarını (ImportMapDefinition) ile ImportMapDefinition.Combinebirleştirin.

Statik varlıkları ilgili benzersiz URL'lerine eşleyen bir ResourceAssetCollection içinden oluşturulan içeri aktarma eşlemesi:

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

Yukarıdaki kod aşağıdaki içeri aktarma eşlemesine neden olur:

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

Statik Dosya Ara Yazılımını, uygulamanın istek işleme işlem hattında arayarak UseStaticFiles istemcilere statik varlıklar sunmak üzere yapılandırın. Daha fazla bilgi için, bkz. ASP.NET Core statik dosyaları.

.NET 8 öncesi sürümlerde, Blazor betik gibi Blazor çerçeve statik dosyaları Statik Dosya Ara Yazılımı aracılığıyla sunulur. .NET 8 veya sonraki sürümlerinde, Blazor çerçeve statik dosyaları uç nokta yönlendirmesi kullanılarak eşlenir ve Statik Dosya Ara Yazılımı artık kullanılmaz.

Bu bölüm tüm .NET sürümleri ve Blazor uygulamaları için geçerlidir.

Aşağıdaki tablolarda statik dosya <link> href biçimleri .NET sürümüne göre özetlenmiştir.

Statik dosya bağlantılarının <head> yerleştirildiği içeriğin konumu için bkz . ASP.NET Core Blazor proje yapısı. Statik varlık bağlantıları, tek tek Razor bileşenlerdeki bileşenler kullanılarak <HeadContent> da sağlanabilir.

Statik dosya bağlantılarının <head> yerleştirildiği içeriğin konumu için bkz . ASP.NET Core Blazor proje yapısı.

.NET 9 veya üzeri

Uygulama türü href değer Örnekler
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" />
Tek başına Blazor WebAssembly {PATH} <link rel="stylesheet" href="css/app.css" />
<link href="_content/ComponentLib/styles.css" rel="stylesheet" />

.NET 8.x

Uygulama türü href değer Örnekler
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" />
Tek başına Blazor WebAssembly {PATH} <link rel="stylesheet" href="css/app.css" />
<link href="_content/ComponentLib/styles.css" rel="stylesheet" />

.NET 7.x veya öncesi

Uygulama türü href değer Örnekler
Blazor Server† {PATH} <link href="css/site.css" rel="stylesheet" />
<link href="_content/ComponentLib/styles.css" rel="stylesheet" />
Barındırılan 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† .NET 8 veya sonraki sürümlerinde desteklenir, ancak artık .NET 7'nin ardından bir proje şablonu değildir.
‡.NET 8 veya üzerini benimserken Barındırılan Blazor WebAssembly uygulamaları s'ye Blazor Web Appgüncelleştirmenizi öneririz.

Statik Web Varlığı Proje Modu

Bu bölüm, projesi Blazor Web Appiçin .Client geçerlidir.

Bir projenin projesinde Blazor Web App .Client gerekli <StaticWebAssetProjectMode>Default</StaticWebAssetProjectMode> ayar, statik varlık davranışlarını varsayılan değerlere geri döndürerek Blazor WebAssembly projenin barındırılan projenin bir parçası olarak davranmasını sağlar. Blazor WebAssembly SDK (Microsoft.NET.Sdk.BlazorWebAssembly), statik web varlıklarını yalnızca kitaplıktaki çıkışları kullanan bir sunucuyla "tek başına" modda çalışacak şekilde yapılandırır. Bu, uygulamanın WebAssembly bölümünün konağın mantıksal bir parçası olduğu ve kitaplık gibi davranması gereken bir için uygun Blazor Web Appdeğildir. Örneğin, proje stiller paketini (örneğin, BlazorSample.Client.styles.css) kullanıma sunmaz ve konağın kendi stil paketine ekleyebilmesi için konağa yalnızca proje paketini sağlar.

özelliğinin (Default) <StaticWebAssetProjectMode> değerinin değiştirilmesi veya özelliğin .Client projeden kaldırılması desteklenmez.

Ortamlarda olmayanDevelopment statik dosyalar

Bu bölüm sunucu tarafı statik dosyaları için geçerlidir.

Bir uygulamayı yerel olarak çalıştırırken, statik web varlıkları yalnızca ortamda Development etkinleştirilir. Yerel geliştirme ve test dışındaki ortamlar Development için statik dosyaları etkinleştirmek için (örneğin, Staging), dosyasında öğesini çağırın WebApplicationBuilder UseStaticWebAssets Program.

Uyarı

Üretim ortamında çağrılırsa proje dışında diskteki ayrı konumlardan dosyalara hizmet vermesinden dolayı, üretim ortamında özelliğin etkinleştirilmesini önlemek için tam ortamı çağırınUseStaticWebAssets. Bu bölümdeki örnek, çağırarak IsStagingortamı denetlerStaging.

if (builder.Environment.IsStaging())
{
    builder.WebHost.UseStaticWebAssets();
}

Varlıklar için Blazor WebAssembly ön ek

Bu bölüm s için Blazor Web Appgeçerlidir.

Varlıkların WebAssemblyComponentsEndpointOptions.PathPrefix ön ekini gösteren yol dizesini ayarlamak için Blazor WebAssembly uç nokta seçeneğini kullanın. Yol, başvuruda bulunan Blazor WebAssembly bir uygulama projesine karşılık gelir.

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

Yukarıdaki örnekte yer {PATH PREFIX} tutucu yol ön ekidir ve eğik çizgi (/ ) ile başlamalıdır.

Aşağıdaki örnekte yol ön eki olarak /path-prefixayarlanmıştır:

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

Statik web varlığı temel yolu

Bu bölüm tek başına Blazor WebAssembly uygulamalar için geçerlidir.

Uygulamayı yayımlamak, yayımlanan çıktıdaki kök yola (/) çerçeve dosyaları (_frameworkklasör varlıkları) dahil olmak üzere Blazor uygulamanın statik varlıklarını yerleştirir. <StaticWebAssetBasePath> Proje dosyasında (.csproj) belirtilen özellik, temel yolu kök olmayan bir yola ayarlar:

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

Yukarıdaki örnekte yer {PATH} tutucu yoldur.

özelliği ayarlanmadan <StaticWebAssetBasePath> , tek başına bir uygulama konumunda /BlazorStandaloneSample/bin/Release/{TFM}/publish/wwwroot/yayımlanır.

Yukarıdaki örnekte yer {TFM} tutucu Hedef Çerçeve Takma Adıdır (örneğin, net6.0TFM).

<StaticWebAssetBasePath> Tek başına Blazor WebAssembly bir uygulamadaki özellik yayımlanan statik varlık yolunu olarak app1ayarlarsa, yayımlanan çıktıda uygulamanın kök yolu olur/app1.

Tek başına Blazor WebAssembly uygulamanın proje dosyasında (.csproj):

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

Yayımlanan çıktıda, tek başına Blazor WebAssembly uygulamanın yolu şeklindedir /BlazorStandaloneSample/bin/Release/{TFM}/publish/wwwroot/app1/.

Yukarıdaki örnekte yer {TFM} tutucu Hedef Çerçeve Takma Adıdır (örneğin, net6.0TFM).

Bu bölüm, tek başına Blazor WebAssembly uygulamalar ve barındırılan Blazor WebAssembly çözümler için geçerlidir.

Uygulamayı yayımlamak, yayımlanan çıktıdaki kök yola (/) çerçeve dosyaları (_frameworkklasör varlıkları) dahil olmak üzere Blazor uygulamanın statik varlıklarını yerleştirir. <StaticWebAssetBasePath> Proje dosyasında (.csproj) belirtilen özellik, temel yolu kök olmayan bir yola ayarlar:

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

Yukarıdaki örnekte yer {PATH} tutucu yoldur.

Özelliği ayarlanmadan, barındırılan <StaticWebAssetBasePath> bir çözümün veya tek başına bir uygulamanın istemci uygulaması aşağıdaki yollarda yayımlanır:

  • Barındırılan Server Blazor WebAssembly çözümün projesinde: /BlazorHostedSample/Server/bin/Release/{TFM}/publish/wwwroot/
  • Tek başına Blazor WebAssembly bir uygulamada: /BlazorStandaloneSample/bin/Release/{TFM}/publish/wwwroot/

Barındırılan <StaticWebAssetBasePath> Blazor WebAssembly bir uygulamanın projesindeki Client veya tek başına Blazor WebAssembly bir uygulamadaki özelliği yayımlanan statik varlık yolunu olarak app1ayarlarsa, yayımlanan çıktıda uygulamanın kök yolu olur/app1.

Client Uygulamanın proje dosyasında (.csproj) veya tek başına Blazor WebAssembly uygulamanın proje dosyasında (.csproj):

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

Yayımlanan çıktıda:

  • Barındırılan Blazor WebAssembly çözüm projesindeki Server istemci uygulamasının yolu:/BlazorHostedSample/Server/bin/Release/{TFM}/publish/wwwroot/app1/
  • Tek başına Blazor WebAssembly bir uygulamanın yolu: /BlazorStandaloneSample/bin/Release/{TFM}/publish/wwwroot/app1/

<StaticWebAssetBasePath> özelliği en yaygın olarak tek bir barındırılan dağıtımda birden çok Blazor WebAssembly uygulamanın yayımlanmış statik varlıklarının yollarını denetlemek için kullanılır. Daha fazla bilgi için bkz . Birden çok barındırılan ASP.NET Core Blazor WebAssembly uygulaması. Özelliği tek başına Blazor WebAssembly uygulamalarda da etkilidir.

Yukarıdaki örneklerde yer {TFM} tutucu Hedef Çerçeve Takma Adıdır (örneğin, net6.0TFM).

Dosya eşlemeleri ve statik dosya seçenekleri

Bu bölüm sunucu tarafı statik dosyaları için geçerlidir.

ile ek dosya eşlemeleri oluşturmak veya diğerini FileExtensionContentTypeProvider StaticFileOptionsyapılandırmak için aşağıdaki yaklaşımlardan birini kullanın. Aşağıdaki örneklerde yer {EXTENSION} tutucu dosya uzantısı {CONTENT TYPE} , yer tutucu ise içerik türüdür. Aşağıdaki API'nin ad alanı şeklindedir Microsoft.AspNetCore.StaticFiles.

  • kullanarak StaticFileOptionsdosyaya Program bağımlılık ekleme (DI) aracılığıyla seçenekleri yapılandırın:

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

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

app.UseStaticFiles();

  • dosyasını StaticFileOptions doğrudan UseStaticFiles Program dosyasına geçirin:

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

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

ile ek dosya eşlemeleri oluşturmak veya diğerini FileExtensionContentTypeProvider StaticFileOptionsyapılandırmak için aşağıdaki yaklaşımlardan birini kullanın. Aşağıdaki örneklerde yer {EXTENSION} tutucu dosya uzantısı {CONTENT TYPE} , yer tutucu ise içerik türüdür.

  • kullanarak StaticFileOptionsdosyaya Program bağımlılık ekleme (DI) aracılığıyla seçenekleri yapılandırın:

    using Microsoft.AspNetCore.StaticFiles;

...

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

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

    Bu yaklaşım, betiği sunmak için kullanılan dosya sağlayıcısını yapılandırıyor Blazor . Özel yapılandırmanızın betiğin sunulmasını Blazor engellemediğinden emin olun. Örneğin, sağlayıcıyı ile provider.Mappings.Remove(".js")yapılandırarak JavaScript dosyaları için eşlemeyi kaldırmayın.

  • Dosyasında için UseStaticFiles Program iki çağrı kullanın:

    • ile StaticFileOptionsilk çağrıda özel dosya sağlayıcısını yapılandırın.
    • İkinci ara yazılım, çerçeve tarafından Blazor sağlanan varsayılan statik dosyalar yapılandırmasını kullanan betiği sağlarBlazor.
    using Microsoft.AspNetCore.StaticFiles;

...

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

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

  • Özel bir Statik Dosya Ara Yazılımı yürütmek için kullanarak MapWhen hizmet _framework/blazor.server.js verme işlemini engellemeyi önleyebilirsiniz:

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

Dosyaları birden çok konumdan sunma

Bu bölümdeki yönergeler yalnızca s için Blazor Web Appgeçerlidir.

Ile birden çok konumdan CompositeFileProviderdosya sunmak için:

Örnek:

Sunucu projesinde adlı AdditionalStaticAssetsyeni bir klasör oluşturun. Klasöre bir görüntü yerleştirin.

Sunucu projesi Program dosyasının en üstüne aşağıdaki using deyimi ekleyin:

using Microsoft.Extensions.FileProviders;

çağrısından UseStaticFilesönce sunucu projesinin Program dosyasına aşağıdaki kodu ekleyin:

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

Uygulamanın Home bileşen (Home.razor) işaretlemesinde resme bir <img> etiketle başvurun:

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

Yukarıdaki örnekte:

  • Yer {IMAGE FILE NAME} tutucu, görüntü dosyası adıdır. Görüntü dosyası klasörün kökündeyse AdditionalStaticAssets yol kesimi sağlamaya gerek yoktur.
  • Yer {ALT TEXT} tutucu, resim alternatif metnidir.

Uygulamayı çalıştırma.

Ek kaynaklar