locked
How to display images outside wwwroot in view? RRS feed

  • Question

  • User1655654435 posted

    Hi, 

    I have a view where i can upload images to a folder outside wwwroot (because i don't want these images to be accessed outside the application).

    the uploading of the images and storing in the correct folder seems to work. this is the upload method:

    [HttpPost]
            public async Task<IActionResult> LagreBilde([FromServices] IHostEnvironment env, IFormFile file, int id)
            {
                if (file == null)
                {
                    return NotFound("filen var tom");
                }
                try
                {                
                    var fileName = System.IO.Path.GetFileName(file.FileName);
    //creates a unique filename...puts some random charachers to the name. like "logo_f45.png" fileName = Path.GetFileNameWithoutExtension(fileName) + "_" + Guid.NewGuid().ToString().Substring(0, 4) + Path.GetExtension(fileName); var uploads = Path.Combine(env.ContentRootPath, "assets"); var filepath = Path.Combine(uploads, fileName); using (var newfile = new FileStream(filepath, FileMode.Create)) { file.CopyTo(newfile); } //saves imagestring in database...nothing interesting here var person = await _context.Person.FindAsync(id); if (person == null) { return RedirectToAction(nameof(Index), new { melding = "uploaded image, but couldn't find person to save it with" }); } person.ImageUrl = fileName; _context.Person.Update(person); await _context.SaveChangesAsync().ConfigureAwait(false); return RedirectToAction(nameof(Index), new { melding = "suksess" }); } catch (Exception ex) { throw new Exception($"something went wrong: {ex.Message}"); } }

    But i can't seem to display the correct images in the view later. When getting the image in view i try this: 

    <img src="~/Program/File/@Model.ImageUrl" style="max-width:380px; max-height:380px;" />

    this is the method in ProgramController:

     

    [HttpGet]
            public IActionResult File([FromServices] IHostEnvironment env, string image)
            {            
                if (string.IsNullOrWhiteSpace(image))
                {
                    return PhysicalFile(Path.Combine(env.ContentRootPath, "assets", "logo.png"), "image/png");
                }
                //this returns a string with the content type...like "image/png"
                string header = GetImageType.GetFileHeader(image);
                return PhysicalFile(Path.Combine(env.ContentRootPath, "assets", image), header);
            }

    First i uploaded an image but i only got the logo.png image i have as a default to display. then i removed that image from the assets folder, but it still displayed that image (probably from cache?). then i created a new person with another image, but that failed to display too (even if all the filenames are correct, it still shows "logo.png"). looking at the html source the link points to /Program/File/newImage.png (but when i click it it shows the logo image)

    In short, even if the filename correctly points to <img src="~/Program/File/newImageBlabla.png" style="max-width:380px; max-height:380px;" />. it still displays the image for "logo.png"

    Tuesday, February 11, 2020 2:23 PM

Answers

  • User665608656 posted

    Hi bluMarmalade,

    According to your description, this has nothing to do with caching.

    In your img tag, the image parameter passed by src is always null, so in the File method, it will enter the if judgment method and finally return logo picture.

    To solve this issue , you just need to modify your img tag to the following:

     <img src="~/Program/File/?image=@Model.ImageUrl" style="max-width:380px; max-height:380px;" />

    Best Regards,

    YongQing.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, February 12, 2020 7:43 AM

All replies

  • User753101303 posted

    Hi,

    It is expected if image is null or empty. Are you 100% sure this is not what happens?

    Tuesday, February 11, 2020 2:35 PM
  • User1655654435 posted

    yes, because even if i remove the guard code in the File method: if(string.isnullorwhitespace(image))... it still displays "logo.png".

    maybe it has something to do with caching? 

    Tuesday, February 11, 2020 2:57 PM
  • User503812343 posted

    It looks like your string is always empty when passed to the controller method.

    Below code returns logo.png if imagename is empty. 

    if (string.IsNullOrWhiteSpace(image))
    {
           return PhysicalFile(Path.Combine(env.ContentRootPath, "assets", "logo.png"), 
        "image/png");
    }



    Tuesday, February 11, 2020 3:07 PM
  • User753101303 posted

    And the url is /Program/File/newImageBlabla.png rather than /Program/File/? Could it be that Model.ImageUrl is not properly populated?

    Tuesday, February 11, 2020 4:11 PM
  • User665608656 posted

    Hi bluMarmalade,

    According to your description, this has nothing to do with caching.

    In your img tag, the image parameter passed by src is always null, so in the File method, it will enter the if judgment method and finally return logo picture.

    To solve this issue , you just need to modify your img tag to the following:

     <img src="~/Program/File/?image=@Model.ImageUrl" style="max-width:380px; max-height:380px;" />

    Best Regards,

    YongQing.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, February 12, 2020 7:43 AM
  • User1655654435 posted

    I see that the string being sent to the File method is in fact null. But why is that? the model.ImageUrl is not null. so the problem must be how i call the method from the view:

     

    <img src="~/Program/File/@Model.ImageUrl" style="max-width:380px; max-height:380px;" />

    Maybe I should render it with some kind of helper special for urls?

    edit: i posted this before i saw the last post wich contained the answer (it was postet at same time)

    Wednesday, February 12, 2020 7:56 AM
  • User753101303 posted

    What if using a string id parameter instead of string image ? You are using the default route for this controller with an optional id parameter ?

    Wednesday, February 12, 2020 8:29 AM