Показать изображение stati c .png на веб-странице Razor

Question

Я начинаю учиться. NET Ядро C#. У меня есть некоторый предыдущий C# опыт, хотя я очень ржавый. У меня было небольшое веб-приложение stati c, которое работало нормально, и я пытаюсь перенести его и расширить как учебное упражнение. Я полностью застрял, просто пытаясь заставить мои изображения отображаться, в частности circle_lo go .png.

Веб-страница отображается (хотя макет, кажется, потерял самообладание - это проблема завтрашнего дня!), Но все изображения имеют неработающие ссылки.

Я потратил несколько часов на то, чтобы драться с доктором Google, и я, должно быть, что-то упустил, потому что кажется, что для отображения простого файла .png в файле требуется много усилий. . Net Core?

Index.cs html

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

Startup.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.cs html. Они отображаются как неработающие ссылки и при щелчке показывают ошибку 404.

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

Структура папки:

Answer 1

Вам нужно поместить папку с изображениями в wwwroot и добавить необходимое промежуточное программное обеспечение в метод Конфигурирование вашего Startup класса (который у вас уже есть):

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

На странице бритвы вы может ссылаться на изображение следующим образом:

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

Символ ~ в sr c означает «root» моего веб-сайта или папку wwwroot в этом случае.

Источник: https://docs.microsoft.com/en-us/aspnet/core/fundamentals/static-files?view=aspnetcore-3.1

Answer 2

Попробуйте переместить папку с изображениями из «Страниц» в «wwwroot».

Таким образом, ваше изображение будет на «wwwroot/image/circle_logo.png», доступ к которому можно получить через «/ image / circle_lo * 1006». * .png "

Answer 3

Обслуживание stati c файлов включено с помощью

app.UseStaticFiles();

, а папка по умолчанию для них - wwwroot.

Попробуйте переместить изображение в эту папку (или в вашем случае в папку wwwroot/image).