img,在wwwroot文件夹中,不会显示标签<img>,为什么?ASP.NET 和 ANGULAR

Img,which is in wwwroot folder, won't show with tag <img> , why? ASP.NET and ANGULAR

提问人:sucha-good-goodboi 提问时间:11/7/2023 最后编辑:sucha-good-goodboi 更新时间:11/7/2023 访问量:37

问:

因此,我的项目位于名为“UsedCarsShop”的文件夹中,该文件夹包含另外两个文件夹:

  1. 前端
    • 它包含“UsedCarsShopFrontend”文件夹,其中是 Angular 项目位于
  2. 后端
    • 它包含“CarWebShop”文件夹。在该文件夹中还有另一个文件夹,名称相同,后端相同 asp.net 项目 在最新的文件夹(CarWebShop)中,有一个名为wwwroot/Photos的文件夹。每个用户的文件夹都包含他们拥有的每辆车的图像。 现在在 Angular 应用程序内的 HTML 文档中,我有这个 img 标签<img src="/Photos/Bogi5/16/some_photo.jpg">

在程序.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
C# asp.net angular asp.net-web-api

评论

0赞 nsquires 11/7/2023
Angular 在请求图像时可能会在基本 href 前面添加。您还可以将图像放置在 Angular 应用程序的文件夹中以处理静态文件。assets
0赞 sucha-good-goodboi 11/7/2023
是的,但是我想显示 rn 的图像是从客户端上传的,由特定的控制者处理。将每个用户的图像保存在前端的assests文件夹中并不好。此外,上面示例中的图像只是为了测试,我在 Angular 中的数组中有每张照片的静态路径,稍后我将使用某些绑定动态显示。
0赞 nsquires 11/7/2023
如果您将这 2 个服务作为单独的服务器运行,即 然后,Angular 应用程序必须从后端服务器请求静态文件的图像。ng servedotnet run<img src="https://localhost:5001/Photos/test.jpg"
1赞 sucha-good-goodboi 11/7/2023
哎呀,我真的像一小时前一样尝试过,但我输入了 localhost:5168,而不是 localhost:5167,但它不起作用。但现在我已经正确输入了它,它可以工作了。谢谢!

答:

0赞 nsquires 11/7/2023 #1

如果将这 2 个服务作为单独的服务器运行,即 ng serve 和 dotnet run,则 angular 应用程序必须从后端服务器请求静态文件的图像。

<img src="https://localhost:5001/Photos/test.jpg" />