How to display image from database filepath in asp.net core razor

Question

as the title states. I have a dedicated directory in the wwwroot directory. the backend initially stores the whole path from the C: Drive then i changed it to the root directory. Am I suppose to store the path according to the solution explorer directory? If I use the full path i.e. from C: Drive or the path from wwwroot in solution explorer i get the same error.

Upload Logic

 public async Task<IActionResult> OnPostAsync(IFormFile file)

        {

            if (!ModelState.IsValid)
            {
                return Page();
            }

            var UserDb = await _context.User.FindAsync(User.ID);



            string folderName = "wwwroot/Uploads/Profile/" + UserDb.ID;
            string webRootPath = _hostEnvironment.ContentRootPath;
            string newPath = Path.Combine(webRootPath, folderName);
            if (!Directory.Exists(newPath))
            {
                Directory.CreateDirectory(newPath);
            }
            string fileName = UserDb.ID + ".jpg";
            string fullPath = Path.Combine(newPath, fileName);
            Console.WriteLine(fullPath);
            string envpath = folderName + "/" + fileName;
            using (var stream = new FileStream(fullPath, FileMode.Create))
            {
                file.CopyTo(stream);
                stream.Flush();

            }


            UserDb.ImageUrl = folderName;
            _context.Attach(UserDb).State = EntityState.Modified;

            try
            {
                await _context.SaveChangesAsync();
            }
            catch (DbUpdateConcurrencyException)
            {
                if (!UserExists(User.ID))
                {
                    return NotFound();
                }
                else
                {
                    throw;
                }
            }

            var currentID = UserDb.ID;
            return RedirectToPage("Socials", new { id = currentID });
        }

        private bool UserExists(int id)
        {
            return _context.User.Any(e => e.ID == id);
        }




    }

Trying to Display The Image

 <dt class="col-sm-2">
        @Html.DisplayNameFor(model => model.User.ImageUrl)
    </dt>
    <dd class="col-sm-10">
       @Html.DisplayFor(model => model.User.ImageUrl)
        <img src="@Url.Content(@Model.User.ImageUrl)" />
    </dd>

Solution Explorer

Answer 1

Your @Model.User.ImageUrl should equal to /Uploads/Profile/1018/1018.jpg. Be sure add single slash at the beginning and specific the file name.

So maybe you need change your backend code like below:

string folderName = "Uploads/Profile/" + UserDb.ID;    //"Uploads/Profile/2017"
                                   //change here...
string webRootPath = _hostEnvironment.WebRootPath;    //"C:\\YourSolutionLocation\\wwwroot"   
string newPath = Path.Combine(webRootPath, folderName);//"C:\\YourSolutionLocation\\wwwroot\\Uploads/Profile/2017"
//....
string envpath = folderName + "/" + fileName;  //"Uploads/Profile/2017/2017.jpg"
//....
UserDb.ImageUrl = envpath;    

Then change the razor pages like below:

<img src="/@Url.Content(@Model.User.ImageUrl)" />