Skip to main content

alAl momento de guardar una imagen muestro en el formulario, la imgimagen que se va a guardar lola muestro de la sigtsiguiente manera:

introducir la descripción de la imagen aquíimg1

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

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

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

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

introducir la descripción de la imagen aquíimg2

El componente donde cargo la imgimagen 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>
 
    <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>
    <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>

al momento de guardar una imagen muestro en el formulario la img que se va a guardar lo muestro de la sigt manera

introducir la descripción de la imagen aquí

Pero al querer editar el registro tambien quiero mostrar la imagen que anteriormente que fue guardada pero me sale el sigt error

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

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

introducir la descripción de la imagen aquí

El componente donde cargo la img 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-->
<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); 
    
            });
        },
                   
    },
  
}

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>
    <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>
Origen Enlace

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 img que se va a guardar lo muestro de la sigt manera

introducir la descripción de la imagen aquí

Pero al querer editar el registro tambien quiero mostrar la imagen que anteriormente que fue guardada pero me sale el sigt error

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

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

introducir la descripción de la imagen aquí

El componente donde cargo la img 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-->

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); 
    
            });
        },
                   
    },
  
}