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;
}
})
8
  • 1
    Is data.Image string with valid data:image prefix?
    – A. Wolff
    Commented May 11, 2016 at 9:53
  • I have tried to browse to the api. Its giving valid base 64 image Commented May 11, 2016 at 9:54
  • @RachitGupta Yes, but as A. Wolff stated, the src attribute of <img> have to be correct. You can't just put a base 64 string there without correct prefix.
    – Arg0n
    Commented May 11, 2016 at 9:56
  • But that's not answering my question. How looks data.Image???
    – A. Wolff
    Commented May 11, 2016 at 9:56
  • @A.Wolff No it wasn't. Now i have prefixed it. There is no error, but still image doesn't come in preview Commented May 11, 2016 at 9:59

1 Answer 1

4

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

6
  • Thanks mattias. The image does load in preview now, but what if i am not sure whether the format is png or jpg etc? Commented May 11, 2016 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 (example.com/images/index/52212) and update the source with that. Commented May 11, 2016 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. Commented May 11, 2016 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. Commented May 11, 2016 at 17:48
  • 1
    Just put the url in src property of an img tag Commented May 11, 2016 at 19:20

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.