Al momento de guardar una imagen muestro en el formulario, la imagen que se va a guardar la muestro de la siguiente manera:
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
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>
http://localhost:8000/public/informacion/HGHeE82UH5cncllVXF2z.jpg
en tu navegador, que sucede?public\informacion\HGHeE82UH5cncllVXF2z.jpg
y como puedes observar la estoy guardando en la carpeta public/informacionhttp://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 conhttp://localhost:8000/informacion/HGHeE82UH5cncllVXF2z.jpg