Cuando @OBTENGO el producto, las imágenes de los productos no son visibles y arroja error GET http://localhost:3000/assets/imagename.png 404 (Not Found) . Vi la solicitud de red y descubrí que las imágenes regresan a la interfaz desde el servidor de NestJs , pero el type is JSON with 404 . Alguien dígame cómo convertir esa respuesta JSON OR text/html en una imagen real que se carga en el servidor.
Angular: subir productos con imagen
clase de exportación AdbooksComponent implementa OnInit {
datos de imagen?: cadena;
libro libro;
AddbookForm = nuevo FormGroup({
oferta: nuevo FormControl(''),
nombre: nuevo FormControl(''),
autor: nuevo FormControl(''),
precio: nuevo FormControl(''),
nombre_géneros: nuevo FormControl(''),
imagen de portada: nuevo FormControl('', {
validadores: [Validadores.requeridos],
}),
});
constructor(
apiService privado de solo lectura: ApiService,
enrutador privado de solo lectura: enrutador,
http privado de solo lectura: HttpClient
) {}
ngOnInit() {}
asíncrono addall() {
this.addfile();
this.addbooks();
this.AddbookForm.reset();
// this.imagedata = '';
}
agregar archivo asíncrono () {
let formData = new FormData();
formData.set(
'expediente',
this.AddbookForm.value.coverimage,
this.AddbookForm.value.coverimage.name
);
esto.http
.post(' http://localhost:3000/images/upload ', formData, {
tipo de respuesta: 'blob',
})
.subscribe((res) => {});
}
libros adicionales asíncronos() {
(espere this.apiService.addbooks(this.AddbookForm.value)).subscribe(
(res) => {
consola.log(res);
}
);
}
carga de imagen asíncrona (evento: cualquiera) {
const archivo = evento.objetivo .archivos[0];
this.AddbookForm.patchValue({imagen de portada: archivo});
const allowMimeTypes = ['imagen/png', 'imagen/jpeg', 'imagen/jpg'];
this.AddbookForm.get('coverimage')?.updateValueAndValidity();
if (archivo && tipos Mime permitidos.incluye(archivo.tipo)) {
const lector = nuevo FileReader();
lector.onload = () => {
this.imagedata = lector.resultado como cadena;
};
lector.readAsDataURL(archivo);
consola.log(archivo);
}
}
}
Angular:Mostrando todos los productos
ngOnInit() {
this.apiService.getallbooks().subscribe((datos) => {
esto.resultados = datos;
consola.log(esto.resultados);
});
}
Angular: Mostrando todos los productos html
<div class="grid" *ngFor="let result of results">
<div class="blog-card spring-fever" style="padding: 0.5rem; z-index: 100">
<img
clase="imagen"
src=" http://localhost:3000/ {{ resultado.imagen de portada }}"
alt=""
altura="400px"
ancho = "250px"
estilo = "borde: 1px rojo sólido"
/>