DEV Community

Cover image for VUE JS Image preview 2024(100% working)
Cedric Isubol
Cedric Isubol

Posted on

VUE JS Image preview 2024(100% working)

I have tested this code and its working on vue js 3, and in plain javascript

function onImageChange (event) {
  const file = document.getElementById('profilePhoto').files[0] // Get selected file

  if (file) {
    const reader = new FileReader()

    // Once the file is read as Data URL (base64), display the preview
    reader.onload = function (e) {
      photo.value = e.target.result // Set the base64 data as the image source
    }

    reader.readAsDataURL(file) // Read the file as base64 Data URL
  }
}
Enter fullscreen mode Exit fullscreen mode

Top comments (0)