Gelöst: Asp .Net6 Statische User-Dateien ausserhalb des Code-Projekts verwenden
.Net6 .Net 7 mit neuen Angular React Vorlage
Problem: in einem Asp.Net / Angular Projekt sollen die User-Dateien ausserhalb des Code Projektes verwendet werden.
Der Link zu den Userdateien soll aber der Basis-URL plus ein User-Pfad sein.
Fehler: mit den neuen Microsoft Vorlagen fĂŒr Asp.Net 6 und .Net 7 mit einem Angular oder React Client Project werden die Dateien nicht angezeigt.
Lösung:
1: man muss in der program.cs mit app.UseStaticFiles einfĂŒgen
Fileprovider zeigt auf den neuen echten Pfad auf der Festplatte,
und RequestPath auf den neuen relativen Sub-Pfad
//< Route User-Files outside of project-folder > string spath_user_files = Path.GetFullPath(Path.Combine(builder.Environment.ContentRootPath, @"..\user_files")); app.UseStaticFiles(new StaticFileOptions { FileProvider = new PhysicalFileProvider(spath_user_files), RequestPath = "/user_files", } ); //</ Route User-Files outside of project-folder >
|
ZusÀtzlich muss man unter der CLientApp-> im der Datei proxy.conf.js den Ausnahmepfad eintragen, der nicht mit der Clientapp verÀndert werden soll bzw. unter der Asp.Net Anwendung verÀndert werden soll
Danach können die neuen Dateien mit einem einfachen relativen Userpfad eingefĂŒgt werden
Hier die Home.component.html
<h1>Test Asp.Net6 .Net7 with Angular14 </h1> <h2>User_Images at User_Folder out of the Project</h2> <br/> <p>test in html: "/user_files/image0.jpg"</p> <img src="/user_files/image0.jpg" /> <br /> 1<img src="/user_files/image (1).jpg" style="width:400px;margin:10px;" /> <br /> 2<img src="/user_files/image (2).jpg" style="width: 400px; margin: 10px;"/> <br /> 3<img src="/user_files/image (3).jpg" style="width: 400px; margin: 10px;"/> <br /> 4<img src="/user_files/image (4).jpg" style="width: 400px; margin: 10px;"/> <br /> 5<img src="/user_files/image (5).jpg" style="width: 400px; margin: 10px;"/>
<hr /> <p>use following code in progam.cs</p> <div> "app.UseStaticFiles(new StaticFileOptions
FileProvider = new PhysicalFileProvider(spath_user_files), RequestPath = "/user_files", " </div> |
Program.cs
using Microsoft.Extensions.FileProviders;
var builder = WebApplication.CreateBuilder(args);
// Add services to the container.
builder.Services.AddControllersWithViews();
var app = builder.Build();
// Configure the HTTP request pipeline. if (!app.Environment.IsDevelopment()) { // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts. app.UseHsts(); }
app.UseHttpsRedirection(); app.UseDefaultFiles();
app.UseStaticFiles(); //< Route User-Files outside of project-folder > string spath_user_files = Path.GetFullPath(Path.Combine(builder.Environment.ContentRootPath, @"..\user_files")); app.UseStaticFiles(new StaticFileOptions { FileProvider = new PhysicalFileProvider(spath_user_files), RequestPath = "/user_files", } ); //</ Route User-Files outside of project-folder >
app.UseRouting();
app.MapControllerRoute( name: "default", pattern: "{controller}/{action=Index}/{id?}");
app.MapFallbackToFile("index.html");
app.Run();
|
Proxy.conf.js
const { env } = require('process');
const target = env.ASPNETCORE_HTTPS_PORT ? `https://localhost:${env.ASPNETCORE_HTTPS_PORT}` : env.ASPNETCORE_URLS ? env.ASPNETCORE_URLS.split(';')[0] : 'http://localhost:53214';
const PROXY_CONFIG = [ { context: [ "/weatherforecast", "/user_files", ], target: target, secure: false, headers: { Connection: 'Keep-Alive' } } ]
module.exports = PROXY_CONFIG;
//"/api/user-profiles", // "/_configuration", // "/css", // "/js", // "/favicon.ico", // "/.well-known", // "/Identity", // "/connect", // "/ApplyDatabaseMigrations", // "/_framework"
|