VUE JS Image preview 2024(100% working)

Cedric Isubol — Mon, 28 Oct 2024 18:29:32 +0000

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
  }
}

DEV Community: Cedric Isubol

VUE JS Image preview 2024(100% working)