VUE JS Image preview 2024(100% working)

cedric_i

Cedric Isubol

Posted on October 28, 2024

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
💖 💪 🙅 🚩
cedric_i
Cedric Isubol

Posted on October 28, 2024

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related