时间戳

首页 > 解决方案 > 在 Razor 网页上显示静态 .png 图像

c# - 在 Razor 网页上显示静态 .png 图像

问题描述

我开始学习 .NET Core C#。尽管我很生疏，但我有一些以前的 C# 经验。我有一个运行良好的小型静态 Web 应用程序，我正在尝试将其迁移并扩展为学习练习。我完全被困在试图让我的图像显示，特别是 circle_logo.png。

网页显示（虽然布局似乎已经失控 - 这是明天的问题！），但所有图像的链接都断开了。

我现在已经花了几个小时在 Google 上搜索医生，但我一定遗漏了一些东西，因为看起来似乎有很多繁重的工作需要在 .Net Core 中显示一个简单的 .png 文件？

索引.cshtml

<img src="/image/circle_logo.png" width="40" height="40" style="margin:0px 20px;" alt="Logo Image">

启动.cs

// This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
    }
    else
    {
        app.UseExceptionHandler("/Error");
        // 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.UseStaticFiles();

    app.UseRouting();

    app.UseAuthorization();

    app.UseEndpoints(endpoints =>
    {
        endpoints.MapRazorPages();
    });
}

当我加载我的应用程序时，图像未显示在 index.cshtml 上。它们显示为断开的链接，如果单击则会显示 404 错误。

This localhost page can’t be foundNo webpage was found for the web address: https://localhost:44319/index.html
HTTP ERROR 404

文件夹结构：

项目中的文件夹结构

标签： c#htmlasp.netasp.net-core.net-core

解决方案

您需要将图像文件夹放在 wwwroot 中，并在Startup类的方法 Configure 中添加所需的中间件（您已经拥有）：

public void Configure(IApplicationBuilder app)
{
    app.UseStaticFiles();
}

在您的剃须刀页面中，您可以按如下方式引用图像：

<img src="~/image/circle_logo.png" width="40" height="40" style="margin:0px 20px;" alt="Logo Image">

src 中的 ~ 符号表示我的网站的“根”或在这种情况下 wwwroot 文件夹。

资料来源：https ://docs.microsoft.com/en-us/aspnet/core/fundamentals/static-files?view=aspnetcore-3.1

推荐阅读