0

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>
6
  • Si copias y pegas esta url http://localhost:8000/public/informacion/HGHeE82UH5cncllVXF2z.jpg en tu navegador, que sucede? Commented el 23 feb. 2020 a las 23:57
  • Hola, me sale el error 404
    – Jonathan
    Commented el 24 feb. 2020 a las 0:08
  • la ruta relativa de public\informacion\HGHeE82UH5cncllVXF2z.jpg y como puedes observar la estoy guardando en la carpeta public/informacion
    – Jonathan
    Commented el 24 feb. 2020 a las 0:17
  • 1
    Ok, la url base, en este caso http://localhost:8000, a través del servidor, ya está apuntando a la carpeta public de tu proyecto, entonces no tienes que poner /public en la url. Prueba ahora con http://localhost:8000/informacion/HGHeE82UH5cncllVXF2z.jpg Commented el 24 feb. 2020 a las 0:21
  • Ah simon, ahi si salio c: gracias men
    – Jonathan
    Commented el 24 feb. 2020 a las 0:25

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

Examina otras preguntas con la etiqueta o formula tu propia pregunta.