Wie kann ich Bilder in Angular aus meiner MySQL -DB zeigen? ⇐ Java

[Anonymous]

Ich mache das Frontend und das Backend eines IT -Shops, um die Bilder jedes Produkts zu speichern. Ich habe eine BLOB -Spalte in der Produkttabelle (weiß nicht, ob es die beste Option ist, aber ich kenne keine andere besser), der Chef sagt mir, ich solle eine externe App durchführen, um das ein Bild direkt zum DB hinzuzufügen.private void addImage() {
String selected = tableView.getSelectionModel().getSelectedItem().getDescripcion();
System.out.println("Intentando añadir imagen al artículo: " + selected);
if (selected == null) {
showAlert("Error", "Seleccione un artículo primero para añadir una imagen.");
return;
}

try {
PreparedStatement pstmt = connection.prepareStatement("SELECT Imagen FROM articulos WHERE Descripción = ?");
pstmt.setString(1, selected);
ResultSet rs = pstmt.executeQuery();
if (rs.next() && rs.getString("Imagen") != null) {
showAlert("Error", "El artículo ya tiene una imagen. Use el botón 'Actualizar' para cambiarla.");
return;
}

FileChooser fileChooser = new FileChooser();
fileChooser.getExtensionFilters().add(
new FileChooser.ExtensionFilter("Images", "*.png", "*.jpg", "*.jpeg")
);
File file = fileChooser.showOpenDialog(null);

if (file != null) {
String base64Image = convertImageToBytes(file);
if (base64Image != null) {
pstmt = connection.prepareStatement("UPDATE articulos SET Imagen = ? WHERE Descripción = ?");
pstmt.setString(1, base64Image);
pstmt.setString(2, selected);
pstmt.executeUpdate();
System.out.println("Imagen añadida correctamente al artículo: " + selected);
displayImage(selected);
} else {
showAlert("Error", "Error al convertir la imagen");
}
}
} catch (SQLException e) {
System.out.println("Error al añadir imagen: " + e.getMessage());
showAlert("Error", "Error al añadir imagen: " + e.getMessage());
}
}

< /code>
private String convertImageToBytes(File imageFile){
byte[] imageBytes = null;
try(ByteArrayOutputStream baos = new ByteArrayOutputStream(); FileInputStream fis = new FileInputStream(imageFile)) {
byte[] buffer = new byte[1024];
int bytesRead;
while ((bytesRead = fis.read(buffer)) != -1) {
baos.write(buffer, 0, bytesRead);
}
imageBytes = baos.toByteArray();
return Base64.getEncoder().encodeToString(imageBytes);
} catch (IOException e) {
e.printStackTrace();
return null;
}
}

< /code>
In the app u just select a product from the db an select an img from your pc, here i dont have a problem the image saves succesfully and even shows itself if u click in the same product again, in the springboot controller i get the product with his image:
@GetMapping("/ofertas")
public ResponseEntity getArticulosEnOferta() {
List articulos = ArticuloService.obtenerArticulosEnOferta();

List articulosDTO = articulos.stream().map(a -> new ArticuloDTO(
a.getId_articulo(),
a.getNombre(),
a.getPrecio_medio(),
a.isRebajado(),
a.getPrecioRebajado(),
a.getImagen() != null ? Base64.getEncoder().encodeToString(a.getImagen()) : null
)).collect(Collectors.toList());

return ResponseEntity.ok(articulosDTO);
}

< /code>
but when i try to show that pic in angular i get an error, normally a loop where the page try to process the image all the time getting a lot of errors in the console log every second:


contacto.component.ts:88 Image failed to load:
Event {isTrusted: true, type: 'error', target: img.full-page-image, currentTarget: img.full-page-image, eventPhase: 2, …}
onImageError @ contacto.component.ts:88
ContactoComponent_div_3_Template_img_error_1_listener @ contacto.component.html:14
Zone - HTMLImageElement.addEventListener:error
ContactoComponent_div_3_Template @ contacto.component.html:14
ContactoComponent_Template @ contacto.component.html:10
XMLHttpRequest.send
loadProduct @ contacto.component.ts:40
ngOnInit @ contacto.component.ts:35
Promise.then
4429 @ main.ts:12
__webpack_exec__ @ main.ts:34
(anonymous) @ main.ts:34
(anonymous) @ main.ts:34
(anonymous) @ main.js:2

< /code>
i added some logs to see if i get the blob column from the db, and yes i get it so the problem should be when angular try to process the img.
cargarProductosEnOferta() {
this.isLoading = true;
this.error = null;

this.productService.getProductosEnOferta().subscribe({
next: (productos) => {
console.log('Productos cargados:', productos.length);
this.productosEnOferta = productos;

productos.forEach((producto, index) => {
console.log(`Producto ${index + 1}:`, {
id: producto.id_articulo,
nombre: producto.nombre,
descripcion: producto.descripcion,
precio_medio: producto.precio_medio,
rebajado: producto.rebajado,
precioRebajado: producto.precioRebajado,
imagen: producto.imagen ? {
tipo: typeof producto.imagen,
longitud: producto.imagen.length,
muestra: typeof producto.imagen === 'string'
? producto.imagen.substring(0, 50) + '...'
: 'byte array'
} : 'sin imagen'
});
});

if (productos.length > 0) {
console.log('Estructura completa del primer producto:', JSON.stringify(productos[0], null, 2));
}

this.isLoading = false;
},
error: (error) => {
console.error('Error loading products:', error);
this.error = 'Error al cargar los productos';
this.isLoading = false;
}
});
}

< /code>
sanitizeBase64Image(imageData: string): SafeUrl {
if (!imageData) {
return this.sanitizer.bypassSecurityTrustUrl('assets/default-product.jpg');
}

try {
return this.sanitizer.bypassSecurityTrustUrl(imageData);
} catch (error) {
console.error('Error processing image:', error);
return this.sanitizer.bypassSecurityTrustUrl('assets/default-product.jpg');
}
}

< /code>
[style.gridTemplateColumns]="'repeat(' + calcularColumnas(productosEnOferta.length) + ', 1fr)'">


[alt]="producto.nombre"
class="product-image">

-{{calcularPorcentajeDescuento(producto)}}%



{{producto.nombre}}

{{producto.precio_medio}}€

{{producto.precioRebajado}}€




Añadir al carrito





< /code>
Probably im just blind and the error is obviously but i really dont see it xd.
Added some logs to see if i get correctly the img from the db this is an example of a product i get: Estructura completa del primer producto: {
"id_articulo": 1, //id from the product
"nombre": "ADAPTADOR USB WIFFI 1200 MBPS NAN0", // name of the product
"precio_medio": 12.86, //Price
"rebajado": true, //In sale
"precioRebajado": 10, //Sale price
"imagen": "data:image/jpeg;base64,LzlqLzRBQVFTa1pKUmdBQkFRQUFBUUFCQUFELzJ3QkRBQU1DQWdJQ0FnTUNBZ0lEQXdNREJBWUVCQVFFQkFnR0JnVUdDUWdLQ2drSUNRa0tEQThNQ2dzT0N3a0pEUkVORGc4UUVCRVFDZ3dTRXhJUUV3OFFFQkQvMndCREFRTURBd1FEQkFnRUJBZ1FDd2tMRUJBUUVCQVFFQkFRRUJB......... //The img chain,and yes its longer than this if anyone ask it