I want display image in vue3 page before save to database, but my code not working

Question

I want display image before in vue3 page before save to database, but my code not working, i have done some checking but i got no result, any one can help me? this is my vue3 :

<script setup>
const getPhoto = () => {
  let photo = "/img/avatar.png"
  if(form.photo){
    if (form.photo.indexOf('base64') !=  -1){
      photo = form.photo 
    }
    else{
      photo = '/img/upload' + form.photo
    }
  }
  return photo
}

const changePhoto = (e) => {
  let file = e.target.files[0];
  let reader = new FileReader();
  let limit = 1024*1024*2

  if (file['size'] > limit){
    return false
  }
  reader.onloadend = (file) => {
    form.photo = reader.result
  }
  reader.readAsDataURL(file)
}

const updateAbout = () => {
  console.log('form', form)
}
</script>

this is template for showing image

<template>

<section class="content-header">
      <div class="container-fluid">
        <div class="row mb-2">
          <div class="col-sm-6">
            <h1>Data Pengguna</h1>
          </div>
          
        </div>
      </div><!-- /.container-fluid -->
      <div class="row">
        <div class="col-12">
          <a href="#" class="btn btn-secondary">Kembali</a>
          <input type="submit" value="Simpan" class="btn btn-success float-right" @click.prevent="updateAbout">
        </div>
      </div>

    </section>
    
    <!-- Main content -->
    <section class="content">
      <div class="row">
        <div class="col-md-6">
          <div class="card card-primary">
            <div class="card-header">
              <h3 class="card-title">Data Lengkap</h3>

              <div class="card-tools">
                <button type="button" class="btn btn-tool" data-card-widget="collapse" title="Collapse">
                  <i class="fas fa-minus"></i>
                </button>
              </div>
            </div>
            <div class="card-body">
            </div>
            <!-- /.card-body -->
          </div>
          <!-- /.card -->
        </div>
        <div class="col-md-6">
          <div class="card card-secondary">
            <div class="card-header">
              <h3 class="card-title">Data Login</h3>

              <div class="card-tools">
                <button type="button" class="btn btn-tool" data-card-widget="collapse" title="Collapse">
                  <i class="fas fa-minus"></i>
                </button>
              </div>
            </div>
            <div class="card-body">
              <div class="form-group">
                <div class="avatar_profile">
                  <img src="getPhoto()" class="" alt="" />
                  </div>
                  <input type="file" @change="changePhoto"/>
              </div>
            </div>
            <!-- /.card-body -->
          </div>
          <!-- /.card -->
        </div>
      </div>
      
    </section>
    </template>

I don't find any error with inspect...

when I open laravel.log, it not show any error

any one can help me? thanks

Answer 1

There's multiple things wrong with this code. First off, the "form" variable is not declared anywhere. This should show up in the console.

Second off, you cannot set a method to the src attribute of an image.

You need a ref variable holding the base64 of your image, like;

import { ref } from "vue";

...

const uploadedImageBase64 = ref();

Then, you need to change the base64 when you upload an image;

const changePhoto = (e) => {
  let file = e.target.files[0];
  let reader = new FileReader();
  let limit = 1024*1024*2

  if (file['size'] > limit){
    return false
  }
  reader.onloadend = (file) => {
    //Change this line
    uploadedImageBase64.value = reader.result
  }
  reader.readAsDataURL(file)
}

In the template you can then show this data as follows;

<img v-if="uploadedImageBase64" :src="`${uploadedImageBase64}`" />

Don't forget to remove all references to the non-existent "form" variable.

You can see it working here:

Demo