C#•3mo ago

trying to display image on browser, but only base64 strings displayed on devtool

See the attached video - I wanted to display the Venice image on my card view, but it came out blank. On devtool seems to me like the app has gotten and posted the base64 string, but it does not display the image back on my card view. Any insights appreciated as to what went wrong here. Here's all my code for your reference https://pastesio.com/base64-to-image-failed

4 Replies

Angius•3mo ago

Any reason your images are base64?

Pedidi•3mo ago

Make sure your base64 it's actually an image. It's too short for image in your video

C#
var file = document.getElementById("listingImageImg").getAttribute("src");

C#
var file = document.getElementById("listingImageImg").getAttribute("src");

I think this code doesn't get image source. I don't know how you change preview image, but in general src for such image will be blob:null/1a2b3c4d-5e6f-7g8h-9i0j-abcdefghij, it's internal reference to file, but not the file.

C#
const fileInput = document.getElementById('fileInput')

const formData = new FormData()
formData.append('file', fileInput.files[0])

$.ajax({
  url: '/upload',
  type: 'POST',
  data: formData,
  processData: false,
  contentType: false
})

C#
const fileInput = document.getElementById('fileInput')

const formData = new FormData()
formData.append('file', fileInput.files[0])

$.ajax({
  url: '/upload',
  type: 'POST',
  data: formData,
  processData: false,
  contentType: false
})

Get file from input to make sure that you send real file Also it's bad practice to put image like blob/base64 in image. Better save images on server as static resources and set src image as url to this resource

morry329#OP•3mo ago

Someone advised me to convert my images to base64, that's why

Unknown User•3mo ago

Message Not Public

Gaming

Programming

trying to display image on browser, but only base64 strings displayed on devtool

Did you find this page helpful?