提问人:sucha-good-goodboi 提问时间:11/7/2023 最后编辑:sucha-good-goodboi 更新时间:11/7/2023 访问量:37
img,在wwwroot文件夹中,不会显示标签<img>,为什么?ASP.NET 和 ANGULAR
Img,which is in wwwroot folder, won't show with tag <img> , why? ASP.NET and ANGULAR
问:
因此,我的项目位于名为“UsedCarsShop”的文件夹中,该文件夹包含另外两个文件夹:
- 前端
- 它包含“UsedCarsShopFrontend”文件夹,其中是 Angular 项目位于
- 后端
- 它包含“CarWebShop”文件夹。在该文件夹中还有另一个文件夹,名称相同,后端相同
asp.net 项目
在最新的文件夹(CarWebShop)中,有一个名为wwwroot/Photos的文件夹。每个用户的文件夹都包含他们拥有的每辆车的图像。
现在在 Angular 应用程序内的 HTML 文档中,我有这个 img 标签
<img src="/Photos/Bogi5/16/some_photo.jpg">
- 它包含“CarWebShop”文件夹。在该文件夹中还有另一个文件夹,名称相同,后端相同
asp.net 项目
在最新的文件夹(CarWebShop)中,有一个名为wwwroot/Photos的文件夹。每个用户的文件夹都包含他们拥有的每辆车的图像。
现在在 Angular 应用程序内的 HTML 文档中,我有这个 img 标签
在程序.cs文件中,我有以下代码:
using CarWebShop.Data;
using CarWebShop.Interfaces;
using CarWebShop.Repository;
using Microsoft.AspNetCore.Authentication.JwtBearer;
using Microsoft.EntityFrameworkCore;
using Microsoft.Extensions.Options;
using Microsoft.IdentityModel.Tokens;
using System.Text;
var builder = WebApplication.CreateBuilder(args);
// Add services to the container.
builder.Services.AddControllers();
builder.Services.AddTransient<ICarRepository, CarsRepository>();
builder.Services.AddTransient<IAdverRepository, AdverRepository>();
// Learn more about configuring Swagger/OpenAPI at https://aka.ms/aspnetcore/swashbuckle
builder.Services.AddEndpointsApiExplorer();
builder.Services.AddSwaggerGen();
builder.Services.AddCors(options =>
{
options.AddDefaultPolicy(builder =>
{
builder.WithOrigins("http://localhost:4200")
.AllowAnyHeader()
.AllowAnyMethod();
});
});
builder.Services.AddDbContext<DataContext>(options =>
{
options.UseSqlServer(builder.Configuration.GetConnectionString("DefaultConnection"));
});
builder.Services.AddControllers()
.AddJsonOptions(options =>
{
options.JsonSerializerOptions.ReferenceHandler = System.Text.Json.Serialization.ReferenceHandler.IgnoreCycles;
});
builder.Services.AddAuthentication(JwtBearerDefaults.AuthenticationScheme)
.AddJwtBearer(options => {
options.TokenValidationParameters = new TokenValidationParameters
{
ValidateIssuer = true,
ValidateAudience = true,
ValidateLifetime = true,
ValidateIssuerSigningKey = true,
ValidIssuer = builder.Configuration["Jwt:Issuer"],
ValidAudience = builder.Configuration["Jwt:Audience"],
IssuerSigningKey = new SymmetricSecurityKey(Encoding.UTF8.GetBytes(builder.Configuration["Jwt:Key"]))
};
});
var app = builder.Build();
// Configure the HTTP request pipeline.
if (app.Environment.IsDevelopment())
{
app.UseSwagger();
app.UseSwaggerUI();
}
app.UseHttpsRedirection();
app.UseAuthorization();
app.UseCors();
app.UseStaticFiles();
app.MapControllers();
app.Run();```
As you can see, I am serving static files.
But Image do not show
Error is GET 'image path' (404) not found
答:
0赞
nsquires
11/7/2023
#1
如果将这 2 个服务作为单独的服务器运行,即 ng serve 和 dotnet run,则 angular 应用程序必须从后端服务器请求静态文件的图像。
<img src="https://localhost:5001/Photos/test.jpg" />
评论
assets
ng serve
dotnet run
<img src="https://localhost:5001/Photos/test.jpg"