Skip to main content

Error al cargar una imagen al momento de editarla en un formulario laravel, vuejs

Al momento de guardar una imagen muestro en el formulario, la imagen que se va a guardar la muestro de la siguiente manera:

img1

Pero al querer editar el registro también quiero mostrar la imagen que anteriormente que fue guardada pero me sale el siguiente error:

En la ruta http://localhost:8000/public/informacion/ es donde guardo las imágenes que se cargan en el formulario.

La imagen si existe en la ruta: http://localhost:8000/public/informacion/HGHeE82UH5cncllVXF2z.jpg

img2

El componente donde cargo la imagen para editarla:

    <template>
 
    <div class="card-body">
        <div class="form-group row border">
            <form enctype="multipart/form-data" class="col-md-12">

                <div class="col-md-8">
                    <div class="form-group">
                        <br>
                        <Label>Tema(*)</Label>
                        <input type="text" class="form-control" v-model="informacion.tema" placeholder="Tema" maxlength="200">
                    </div>
                </div>

                <div class="col-md-8">
                    <div class="form-group">
                        <br>
                        <Label>Capacitador(*)</Label>
                        <input type="text" class="form-control" v-model="informacion.capacitador" placeholder="Capacitador" maxlength="200">
                    </div>
                </div>

                <div class="col-md-8">
                    <div class="form-group">
                        <Label>Conoce(*)</Label>
                        <textarea rows="4" cols="50" maxlength="200" class="form-control" v-model="informacion.conoce" placeholder="Conoce"> </textarea>
                    </div>
                </div>

                <div class="col-md-5">
                    <div class="form-group">
                        <Label>Seleccione la imagen(*)</Label>
                        <input type="file" @change="obtenerImagen" ref="file" accept=".jpg, .png, .jpeg" class="form-control file">
                    </div>
                </div>

                <div class="col-md-6">
                    <div class="form-group">
                        <div>
                            <br>
                            <span type="hidden"><img :src="imagen" alt="Imagen a cargar" width="100%" height="100%"></span>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <!--fin card body-->
    <div class="card-body">

        <div class="form-group row">
            <div class="col-md-12">
                <button type="submit" class="btn btn-primary" @click="actualizar()">Actualizar Información</button>
            </div>
        </div>
    </div>
    <!--fin 2do card body-->
</template>

El script del componente

    <script>
    export default {
        data() {
            return {
                informacion: {
                    tema: '',
                    capacitador: '',
                    conoce: '',
                    imagenCargar: '',
                    imagenMiniatura: '',
                    id: '',
                },               
                file: '', 
                text:'',           
            }
        },
        computed: {
            imagen(){
                return this.informacion.imagenMiniatura;
            }
        }, 
    
        methods: {
            obtenerImagen(e){
               let me = this;
                me.file = e.target.files[0];//img en la posicion 0
                this.imagenCargar = me.file['name']; //agregamos la informacion
                this.cargarImagen(me.file);
               
                
                if (this.validarDatos()) {
                    return;
                }
            },
            cargarImagen(file){
                let reader = new FileReader();
                reader.onload = (e) =>{
                    this.informacion.imagenMiniatura = e.target.result;
                }
                reader.readAsDataURL(file);
            },           
            editar(id) {
              
                let me = this;
                var url = '/informacion/obtener?id=' + id;
                var arrayEditarDatos=[];
                var ruta = '/informacion/'
                axios.get(url).then(function(response) {
                    var respuesta= response.data;
                    arrayEditarDatos = respuesta.informacion;
                    me.informacion.id = arrayEditarDatos[0]['id'];
                    me.informacion.tema = arrayEditarDatos[0]['tema'];
                    me.informacion.capacitador=arrayEditarDatos[0]['capacitador'];
                    me.informacion.conoce=arrayEditarDatos[0]['conoce'];
                    me.file = arrayEditarDatos[0]['imagen'];
                    me.informacion.imagenMiniatura = 'http://localhost:8000/public/informacion/' + ''+me.file;
                
                }).catch((error) =>{
                    console.log(error); 
        
                });
            },
                       
        },
      
    }
</script>