He estado en esto durante un día completo y simplemente no puedo encontrar una respuesta.

Imagine un formulario con un campo de entrada de archivo de carga. Al lado también hay un botón llamado "seleccionar plantilla". El usuario puede cargar su propia imagen o seleccionar una imagen de una plantilla determinada.

Aquí está el problema, no puedo enviar la imagen seleccionada al campo de entrada (para que pueda procesarla en mi publicación de axios más adelante).

Esta es la tabla donde se muestran todos los archivos de plantilla:

 <table class="table table-borderless table-hover"> <thead> <tr> <th></th> <th></th> <th></th> </tr> </thead> <tbody> <tr v-for="item in image_gallery"> <td class="align-middle">{{ item.id }}</td> <td class="align-middle">{{ item.title }}</td> <td><img :src="'/storage/images/' + item_image" class="img-thumbnail" alt="" style="width: 75px;" @click="selectImage(item.id, $event)"> </td> </tr> </tbody> </table>

Cuando el usuario hace clic en la imagen de arriba, me gustaría que el archivo se establezca en este campo de entrada (que es la misma entrada donde el usuario puede cargar su propio archivo).

 <label class="btn btn-info btn-block btn-sm"> <i class="fas fa-upload text-white"></i> <input type="file" id="file" @change="onFileAttached(1)" ref="file" accept="image/png, image/jpeg" hidden/> </label>

Intenté esto:

 selectImage(id, event){ this.$refs.files[0].src = event.files[0].src; //or this.$refs.files[0].src = event.target.src; }

Pero no tuve suerte... No entiendo lo que me estoy perdiendo :-(

¿Hay alguna manera de tomar manualmente una URL de una imagen determinada para configurar esta imagen en un campo de entrada?

Gracias de antemano por orientarme un poco.