locked
Display byte[] image in the Edit view is giving 'could not load the image' RRS feed

  • Question

  • User991566988 posted

    Hi

    I'm using core2.1 trying to display an image saved in Byte[] column in SQL Server 2017 DB.

    It is shown as this in the DB:

    the image column has an image in it in that case right?

    The model:

        public partial class Nzeel
        {
            public decimal Id { get; set; }
    
            public byte[] Image { get; set; }
    
            public string ContentType { get; set; }

    trying to display an image by this method:

            private readonly ApplicationDbContext _context;
    //Some code
    public FileStreamResult ViewImage(decimal? id) { Models.Nzeel image = _context.Nzeel.FirstOrDefault(m => m.Id == id); MemoryStream ms = new MemoryStream(image.Image); return new FileStreamResult(ms, image.ContentType); }

    Then trying to display it in the Edit view like this:

    <img src="/Nzeel/ViewImage/@Model.Image" />

    When I navigate to this Edit view and run the Inspect Element in Firefox it is show like this:

    Why? and how solve please?

    Friday, June 21, 2019 3:31 PM

Answers

  • User753101303 posted

    Hi,

    What if you try 

    <img src="/Nzeel/ViewImage/@Model.Id"

    It should create something like a ../ViewImage/12 link that will trigger the code you shown. Currently you are rendering directly the byte array rather than the image id and as for most complex types byte[].ToString() returns the type name which is why you see System.Byte[] instead.

    Edit: IMHO avoid the other suggested solution unless the image is small and not used frequently. It renders image data directly as part of the page which can be counter productive if the image is not small or is used often on the site.

    .

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, June 21, 2019 3:57 PM

All replies

  • User2103319870 posted

    how solve please?

    You can try the solution suggested in this link http://www.binaryintellect.net/articles/e6d71127-1f12-4555-879b-6a859947eafa.aspx

    Friday, June 21, 2019 3:56 PM
  • User753101303 posted

    Hi,

    What if you try 

    <img src="/Nzeel/ViewImage/@Model.Id"

    It should create something like a ../ViewImage/12 link that will trigger the code you shown. Currently you are rendering directly the byte array rather than the image id and as for most complex types byte[].ToString() returns the type name which is why you see System.Byte[] instead.

    Edit: IMHO avoid the other suggested solution unless the image is small and not used frequently. It renders image data directly as part of the page which can be counter productive if the image is not small or is used often on the site.

    .

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, June 21, 2019 3:57 PM
  • User991566988 posted

    you are right! Thanks.

    Friday, June 21, 2019 4:05 PM
  • User2103319870 posted

    PatriceSc

    MHO avoid the other suggested solution unless the image is small and not used frequently. It renders image data directly as part of the page which can be counter productive if the image is not small or is used often on the site.

    Completely Agree with you, when I saw OP's image I thought the issue was byte not being converted . Hence suggested the solution which converts the byte to Base64 format

    Friday, June 21, 2019 4:17 PM