2

I have a project which is built on ASP.NET MVC. There is a database table to store user's details including image, an api to output his details and view where i consume the api by ajax call. My api is returning the base64 value of image perfectly, but a 404 error comes saying request uri too long when i try to display the image.

Relevant lines of code are

$.ajax({
url: // url of api,
type: "GET",
success: function (data) {
var preview = document.querySelector('img');
preview.src = data.Image;
}
})
It's a trap
  • 1,333
  • 17
  • 39

1 Answers1

4

Does your base64-string start with data:image/png;base64,? Look here for complete example.

Community
  • 1
  • 1
Mattias Åslund
  • 3,877
  • 2
  • 18
  • 17
  • Thanks mattias. The image does load in preview now, but what if i am not sure whether the format is png or jpg etc? – It's a trap May 11 '16 at 10:00
  • I suggest you make sure server-side and include the entire string in the response. Better yet, return a url to an action that returns the image in binary form (http://example.com/images/index/52212) and update the source with that. – Mattias Åslund May 11 '16 at 13:53
  • Ok Thanks. Can you help me in another issue. I am trying to save the image base64 in local storage( which i believe is upto 5 MB), but i am getting exception even when the image is greater than 3.8 MB. Also i haven't stored anything else in that till now. – It's a trap May 11 '16 at 17:40
  • Sorry, don't know, but think there are still inconsistencies between browsers. Again, if you return a url to the image instead you can return it with normal cache headers so it gets cached by the browser without size restraints. – Mattias Åslund May 11 '16 at 17:48
  • If i return a url to the image, how can it be displayed on the webpage? – It's a trap May 11 '16 at 18:12
  • 1
    Just put the url in src property of an img tag – Mattias Åslund May 11 '16 at 19:20