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"
|