Uso spring mvc y JPA en mi proyecto. Obtengo el archivo como byte[]
y lo guardo en la base de datos. pero cuando quiero mostrar en la etiqueta <img
de html, no se muestra.
mi entidad es:
class Photo { @Id @GeneratedValue(strategy = GenerationType.AUTO) private Long id; private String title; @Lob private byte[] profilePic; // getter and setter }
pero la respuesta de mi servidor es:
{ "id": 4, "title": "pic 1", "profilePic": "ZGF0YTppb...VFtQ0M=", }
y mostrar en html:
<img src='ZGF0YTppb...VFtQ0M=' /> //or <img src='data:image/jpeg;base64,ZGF0YTppb...VFtQ0M=' />
¿Qué hacer para mostrar la foto?
Gracias
Asumiendo que está codificado en base64:
<img src='data:image/jpeg;base64,ZGF0YTppb...VFtQ0M=' />
Básicamente, puede usar URL de datos con este formato según el [tipo] de contenido que desee mostrar:
data:[<mime type>][;charset=<charset>][;base64],<encoded data>
HTML:
<img id="profileImg" src="">
JS:
document.getElementById("profileImg").src = "data:image/png;base64," + profilePic;
Esto supone que su imagen está almacenada en formato PNG (y codificada en base64). Para otro formato de imagen (JPEG, etc.), debe cambiar el tipo MIME (parte "image/...") en la URL.