locked
How to get a photo image to show via Controller RRS feed

  • Question

  • User-501297529 posted

    In my controller I am trying to get the photo image but it doesn't come across on the view. I feel like the problem is with the code in the controller. What am I missing?

    Controller:

     public async Task<ActionResult> GetPhoto(long photoId, CancellationToken cancellationToken)
            {
                try
                {
                    var photoFile = await _photoService.GetPhotoByPhotoIdAsync(photoId, cancellationToken)
                        .ConfigureAwait(false);
                    var image = photoFile.Image;
    
                    if (photoFile == null || photoFile.Id < 1)
                    {
                        return NotFound();
                    }
    
                    Response.Headers.Add("content-disposition", "inline;filename=" + photoFile);
    
                    return File(image, "png");
                }
                catch
                {
                    return NotFound();
                }
            }

    View:

     <div class="col-md-4">
            <div class="profile-img">
                @{
                    if (Model.PhotoId != null)
                    {                  
                        <img src="@Url.Action("GetPhoto", "Photo", new {photoId = Model.PhotoId})"
                             class="user" style="width: 150px; height: 150px;" alt="profile pic"/>             
                      
                    }
                    else
                    {
                        <div class="user egghead">
                        </div>
                    }
                }
            </div>
        </div>

    Wednesday, April 22, 2020 5:44 PM

Answers

  • User-501297529 posted

    mgebhard

    bootzilla

    Updated controller a little bit but still no image

     public async Task<ActionResult> GetPhoto(long photoId, CancellationToken cancellationToken)
            {
                try
                {
                    var photoFile = await _photoService.GetPhotoByPhotoIdAsync(photoId, cancellationToken)
                        .ConfigureAwait(false);
                   
                   
                    if (photoFile.Image == null || photoFile.Image.Length == 0)
                    {
                        return NotFound();
                    }
    
                    
                    return File(photoFile.Image, "image/png");
                }
                catch
                {
                    return NotFound();
                }
            }

    I provided the sample code to prove that returning File(byte[], "<string>content-type") works.  That means there is something wrong with your code.   It could be the service is not working correctly or working as you expect.  Try running the code through the debugger.  As pointed out above, are you sure photo.Image is a png?

    Well you sort of did but you didn't say what imagePath is. I asked this but got no answer from you. When I use your code I get an error on imagePath. I'm assuming that's a string param?? 

    Also what is 'Home' in the UrlAction on the view? That's not a controller action in the controller example you provided.

    @model MvcDemo.Controllers.PhotoVm
    @{
        ViewData["Title"] = "Home Page";
    }
    
        <div id="redirectAction">
            <img src="@Url.Action("GetPhoto", "Home", new {photoId = Model.PhotoId})"
                 class="user" alt="profile pic" />
        </div>

    And yes the photo is a png.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, April 22, 2020 7:57 PM

All replies

  • User475983607 posted

    I built a simple test based on code and the image shows in the browser.  Your content-type is not correct for a png.

    @model MvcDemo.Controllers.PhotoVm
    @{
        ViewData["Title"] = "Home Page";
    }
    
        <div id="redirectAction">
            <img src="@Url.Action("GetPhoto", "Home", new {photoId = Model.PhotoId})"
                 class="user" alt="profile pic" />
        </div>
    
    
            [HttpGet]
            public IActionResult Index()
            {
                PhotoVm model = new PhotoVm() { PhotoId = 1 };
                return View(model);
            }
    
            [HttpGet]
            public IActionResult GetPhoto(int id)
            {
                byte[] image = System.IO.File.ReadAllBytes(imagePath);
                return File(image, "image/png");
            }

    If you are still having issues try running your code through the Visual Studio debugger.  Also use the browser's dev tools to to view the network trace for issues.

    Wednesday, April 22, 2020 6:45 PM
  • User-501297529 posted

    I built a simple test based on code and the image shows in the browser.  Your content-type is not correct for a png.

    @model MvcDemo.Controllers.PhotoVm
    @{
        ViewData["Title"] = "Home Page";
    }
    
        <div id="redirectAction">
            <img src="@Url.Action("GetPhoto", "Home", new {photoId = Model.PhotoId})"
                 class="user" alt="profile pic" />
        </div>
    
            [HttpGet]
            public IActionResult Index()
            {
                PhotoVm model = new PhotoVm() { PhotoId = 1 };
                return View(model);
            }
    
            [HttpGet]
            public IActionResult GetPhoto(int id)
            {
                byte[] image = System.IO.File.ReadAllBytes(imagePath);
                return File(image, "image/png");
            }

    If you are still having issues try running your code through the Visual Studio debugger.  Also use the browser's dev tools to to view the network trace for issues.

    What is imagePath, what does that respresent?

     byte[] image = System.IO.File.ReadAllBytes(imagePath);

    Wednesday, April 22, 2020 6:53 PM
  • User475983607 posted

    What is imagePath, what does that respresent?

    It's a string that holds the path to an image.

    Wednesday, April 22, 2020 7:04 PM
  • User-474980206 posted

    Probably in the line

    var image = photoFile.Image;

    image is not a valid byte array of a png file.

    Wednesday, April 22, 2020 7:18 PM
  • User-501297529 posted

    Updated controller a little bit but still no image

     public async Task<ActionResult> GetPhoto(long photoId, CancellationToken cancellationToken)
            {
                try
                {
                    var photoFile = await _photoService.GetPhotoByPhotoIdAsync(photoId, cancellationToken)
                        .ConfigureAwait(false);
                   
                   
                    if (photoFile.Image == null || photoFile.Image.Length == 0)
                    {
                        return NotFound();
                    }
    
                    
                    return File(photoFile.Image, "image/png");
                }
                catch
                {
                    return NotFound();
                }
            }

    Is there possibly something wrong with my html in the view that's posted in my original post?

    Wednesday, April 22, 2020 7:30 PM
  • User475983607 posted

    Updated controller a little bit but still no image

     public async Task<ActionResult> GetPhoto(long photoId, CancellationToken cancellationToken)
            {
                try
                {
                    var photoFile = await _photoService.GetPhotoByPhotoIdAsync(photoId, cancellationToken)
                        .ConfigureAwait(false);
                   
                   
                    if (photoFile.Image == null || photoFile.Image.Length == 0)
                    {
                        return NotFound();
                    }
    
                    
                    return File(photoFile.Image, "image/png");
                }
                catch
                {
                    return NotFound();
                }
            }

    I provided the sample code to prove that returning File(byte[], "<string>content-type") works.  That means there is something wrong with your code.   It could be the service is not working correctly or working as you expect.  Try running the code through the debugger.  As pointed out above, are you sure photo.Image is a png?

    Wednesday, April 22, 2020 7:51 PM
  • User-501297529 posted

    mgebhard

    bootzilla

    Updated controller a little bit but still no image

     public async Task<ActionResult> GetPhoto(long photoId, CancellationToken cancellationToken)
            {
                try
                {
                    var photoFile = await _photoService.GetPhotoByPhotoIdAsync(photoId, cancellationToken)
                        .ConfigureAwait(false);
                   
                   
                    if (photoFile.Image == null || photoFile.Image.Length == 0)
                    {
                        return NotFound();
                    }
    
                    
                    return File(photoFile.Image, "image/png");
                }
                catch
                {
                    return NotFound();
                }
            }

    I provided the sample code to prove that returning File(byte[], "<string>content-type") works.  That means there is something wrong with your code.   It could be the service is not working correctly or working as you expect.  Try running the code through the debugger.  As pointed out above, are you sure photo.Image is a png?

    Well you sort of did but you didn't say what imagePath is. I asked this but got no answer from you. When I use your code I get an error on imagePath. I'm assuming that's a string param?? 

    Also what is 'Home' in the UrlAction on the view? That's not a controller action in the controller example you provided.

    @model MvcDemo.Controllers.PhotoVm
    @{
        ViewData["Title"] = "Home Page";
    }
    
        <div id="redirectAction">
            <img src="@Url.Action("GetPhoto", "Home", new {photoId = Model.PhotoId})"
                 class="user" alt="profile pic" />
        </div>

    And yes the photo is a png.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, April 22, 2020 7:57 PM
  • User475983607 posted

    bootzilla

    Well you sort of did but you didn't say what imagePath is. I asked this but got no answer from you. When I use your code I get an error on imagePath. I'm assuming that's a string param?? 

    I did answer the question.   It is a string that contains the path to a png image.   

    private readonly string imagePath = @"C:\inetpub\wwwroot\images\guitar_PNG3362.png";

    bootzilla

    Also what is 'Home' in the UrlAction on the view? That's not a controller action in the controller example you provided.

    I wrote the demo in the my Home controller.  Sorry, I did not think someone with your experience would have trouble with an image path and controller name.

    Anyway, your code has issues.  You'll need to debug to figure out where the code goes south.  Or you can share photo service so the community can perform a code review.

    Wednesday, April 22, 2020 8:09 PM
  • User-501297529 posted

    bootzilla

    Well you sort of did but you didn't say what imagePath is. I asked this but got no answer from you. When I use your code I get an error on imagePath. I'm assuming that's a string param?? 

    I did answer the question.   It is a string that contains the path to a png image.   

    private readonly string imagePath = @"C:\inetpub\wwwroot\images\guitar_PNG3362.png";

    bootzilla

    Also what is 'Home' in the UrlAction on the view? That's not a controller action in the controller example you provided.

    I wrote the demo in the my Home controller.  Sorry, I did not think someone with your experience would have trouble with an image path and controller name.

    Anyway, your code has issues.  You'll need to debug to figure out where the code goes south.  Or you can share photo service so the community can perform a code review.

    I didn't have trouble with either. I just wanted to make sure that I didn't miss something. You were pretty vague in your post.

    Wednesday, April 22, 2020 9:27 PM
  • User-854763662 posted

    Hi bootzilla ,

    What's the _photoService.GetPhotoByPhotoIdAsync() ?

    If you want the community review and debug the code , could you share a complete demo that can reproduce the issue?

    Best Regards,

    Sherry

    Thursday, April 23, 2020 8:40 AM