AspNet Core - Could not load the image from FileStreamResult

Question

Please help.

I've been searching for hours now as I cannot display the image on the website. I'm using byte[] from database then return FileStreamResult in controller.

Below is my code

.cshtml

 <img src="@Url.Action("GetImage", "User")" />

User Service

I was able to call the api with byte[] value.

    public async Task<HttpResponseMessage> GetImage()
    {
        var client = _clientFactory.CreateClient("ApiName");
        var response = await client.GetAsync(apiUrl);
        return response;
    }

Controller

    [ResponseCache(Duration = 10)]
    [HttpGet]
    public async Task<IActionResult> GetImage()
    {
        var response = await _user.GetImage();
        if (response.IsSuccessStatusCode)
        {
            var logo = await response.Content.ReadAsByteArrayAsync();
            var ms = new MemoryStream(logo);
            FileStreamResult result = new FileStreamResult(ms, "image/png");
            result.FileDownloadName = "logo1223.png";
            return result;
        }

        return null;
    }

API

        [HttpGet("logo")]
        public async Task<IActionResult> GetImage()
        {
            var someByte= await GetSomeImage();
            return Ok(someByte);
        }

when I tried to download or save the image file I get this result.

Image is not loading from the website

UPDATE I tried to manually get the file then convert to byte[] and image is displaying properly on the website, I checked how they upload the image... I found out they are using below code to save image on DB.

var byteArr= Encoding.UTF8.GetBytes(Convert.ToBase64String(bArr.ToArray()))

Tried this modified controller

 public async Task<FileContentResult> GetImage()
 {
            var img = Image.FromFile(@"C:\Downloads\test.png");
            byte[] bArr = imgToByteArray(img);
            var a = Encoding.UTF8.GetBytes(Convert.ToBase64String(bArr.ToArray()));
            return File(bArr, "image/png"); // WORKING!!!
            //return File(a, "image/png"); // NOT WORKING!!
}

Is there a way to convert it to original byte image?

For debugging purposes, have you tried to read the image directly from file in your action? — Jasen, Dec 02 '21 at 20:52
In `UserService` you download from your api or third party? If yours, could you please share that code as well? You need to ensure that the data is the actual image — Alexander, Dec 03 '21 at 01:11
@Alexander from my api as well and byte[] is saved in database. I'm just getting the value and passed to web. — Mary, Dec 03 '21 at 01:19
Does that api returns `FileStreamResult` or some other type of `FileResult`? — Alexander, Dec 03 '21 at 01:27
It looks like either the function `GetSomeImage()` in the API is the problem, or the image bytes stored in the database are invalid/corrupt. I would try debugging this by reading a working image file as byte[] from the filesystem and return that (rather than getting from database). This will tell you what is broken – the code or the bytes in the database. — Conman_123, Dec 03 '21 at 04:12
@Conman_123 have updated the question. You are correct the image displaying properly on the website. Is there a way to convert the byte from db to its original image byte? — Mary, Dec 03 '21 at 07:06
You could consider convert it to base64 and directly show it in browser . — Brando Zhang, Dec 03 '21 at 09:43

score 0 · Accepted Answer · answered Dec 03 '21 at 08:24

The main issue is logo is saved in db using below code

var byteArr= Encoding.UTF8.GetBytes(Convert.ToBase64String(bArr.ToArray()))

Solution: Convert to original byte[] to get the image

        [ResponseCache(Duration = 10)]
        [HttpGet]
        public async Task<IActionResult> GetImage()
        {
            var response = await _user.GetImage();
            if (response.IsSuccessStatusCode)
            {
               // I created new class Logo which contains byte[] Logo
                var logo = await response.Content.ReadAsAsync<Logo>();
               // Convert to original byte[]
                byte[] originalByte = Convert.FromBase64String(Encoding.UTF8.GetString(logo.Logo));
                 
                return File(originalByte, "image/png");
            }
    
            return null;
        }

AspNet Core - Could not load the image from FileStreamResult

1 Answers1