how to show the image in .net core

Question

I am working with .net core 3.1

I am successfully upload the image in database but I am trying to display that image but not able to display

when I am seeing the console error:

This localhost page can’t be foundNo webpage was found for the web address: https://localhost:00000000/home/WebRootPath/Imagef/_b9f5Image.jpg

Database Image

Index Page Image

Image Folder Path

Student.cs

namespace TestCore.Models
{
    public partial class Student
    {
        public string ImageDescription { set; get; }
        public string ImageName { set; get; }
    }

    public class StudentViewModel
    {
        public string ImageDescription { set; get; }
        public IFormFile File { set; get; }
    }
}

HomeController.cs

        [HttpGet]
        public IActionResult Index()
        {
            return View(studDBContext.students.ToList());
        }

        [HttpGet]
        public IActionResult Create()
        {
            return View();
        }
        [HttpPost]
        public IActionResult Create(StudentViewModel svm)
        {
            if (svm.File != null)
            {
                var fileName = Path.GetFileName(svm.File.FileName);
                var createGUID = "_" + Guid.NewGuid().ToString().Substring(0, 4);
                var filePath = Path.Combine("WebRootPath", "Imagef", createGUID + fileName);
                                                                          
                using (var fileSteam = new FileStream(filePath, FileMode.Create))
                {
                    svm.File.CopyTo(fileSteam);
                }

                Student student = new Student();
                student.ImageDescription = fileName;
                student.ImageName = filePath ;

                studDBContext.students.Add(student);
                studDBContext.SaveChanges();
            }
            return View();
        }

Index.cshtml

<tbody>
        @foreach (var item in Model)
        {
            <tr>
                <td>
                    @item.ImageDescription
                </td>
                <td>
                    <img src="@Url.Content(item.ImageName)" alt="Image" style="width:50px;height:50px;" />
                </td>

I want to show image in index page need help

I think logic is I think Image need the whole path but I am not given whole path that is issue I think

I am trying but image not shown

Answer 1

Since your imagef folder is not under your wwwroot, you need to set your file path.

You can add following code in your Startup

        app.UseStaticFiles();
        app.UseFileServer(new FileServerOptions
        {
            FileProvider = new PhysicalFileProvider(
            Path.Combine(env.ContentRootPath, "WebRootPath")),
            RequestPath = "/WebRootPath"
        });

In your view:

 <img src="~/@Url.Content(item.ImageName)" alt="Image" style="width:50px;height:50px;" />

Test: