Jhipster - [src] = "getImageUrl()" pour l'image de l'avatar de l'utilisateur ne fonctionne pas

Question

Je colonne mise à jour: image_url dans [jhi_user] table avec des valeurs différentes, et rien ne semble fonctionner, example: image_url= ../../../content/media/angular-js.png

Question: Où dans la structure de fichier de jhipster dois-je créer un dossier pour contenir les photos des profils d'utilisateur, et qu'est-ce que la valeur image_url être pour qu'il fonctionne avec <img [src]="getImageUrl()">

il convient de mentionner que cela fonctionne: <img src="../../../content/media/angular-js.png"> i créé un dossier « media » avec image: angular-js.png

J'utilise la base de données MySQL et générateur jhipster: « 4.6.2 »

Merci pour votre aide à l'avance

Answer 1

Il y a 2 types d'images dans les applications Web: les actifs statiques sont utilisés pour la mise en page (icônes, arrière-plan, logos, ...) ils sont regroupés dans votre application et les autres qui peuvent être modifiés sans reconstruire votre application et qui sont des données.

Les ressources statiques peuvent être mises en cache à long terme par le navigateur, c'est pourquoi JHipster utilise webpack to version their URLs avec un code de hachage, pour modifier les fichiers qui les référencent (html, css) et les regrouper.

Dans votre conception, votre URL d'image est stockée dans une colonne de l'entité Utilisateur qui pointe vers une image d'avatar qui est un actif statique. Donc, webpack n'est pas capable de le réécrire. Donc, soit vous excluez ces images du processus de construction webpack, soit vous stockez vos images en tant que Blobs dans votre base de données pour permettre à vos utilisateurs de télécharger leurs propres images.

La deuxième option consisterait à créer une nouvelle entité Avatar qui détient le BLOB et qui a une relation un-à-un avec l'entité Utilisateur. La raison pour laquelle une autre entité est que JHipster ne vous permet pas de modifier l'entité Utilisateur.