Je développe une API de repos en utilisant Spring Boot. J'ai un service d'image de téléchargement qui stocke les images dans mon espace de travail de projet et l'url d'image dans stocké dans db. J'ai un produit d'entité qui contient une liste d'images. Maintenant, je dois renvoyer les images au client angulaire.
J'ai deux questions en tête:
Q1. Dois-je renvoyer juste une liste d'urls d'image au client? Si oui, comment le client doit-il rendre les images à partir de ces URL?
Q2. OU Dois-je retourner la liste des images elle-même? Si oui, montrez-moi la logique qui est rapide et efficace.
Q3. OU Dois-je renvoyer une image individuelle une par une? Si oui, dites-moi comment.
Mise à jour:
Remarque: depuis, l'api Rest est sur une machine et le client Angular est sur une autre machine. Je pense que l'url de l'image a besoin d'une sorte de préfixe:
Supposons que mon projet se trouve dans E: / myproject / et que les images sont dans E: /myproject/images/image-name.jpg, donc quel devrait être le préfixe pour l'url de l'image.
3 Réponses :
Q1. Dois-je renvoyer juste une liste d'urls d'image au client? Si oui, comment le client doit-il afficher les images à partir de ces URL?
CECI . Puisque tout ce que vous avez à faire ensuite est de donner ces balises URL dans le front-end. Cela libèrera également le serveur de la responsabilité de télécharger l'image et de la réparer aux clients. 
Q2. OU Dois-je retourner la liste des images elle-même? Si oui, montrez-moi la logique qui est rapide et efficace.
C'est possible mais très difficile. Je ne conseille pas de faire cela car cela obligera le système à télécharger l'image deux fois: le premier est du stockage de fichiers au backend, puis le second est du backend au frontend.
Q3. OU Dois-je renvoyer une image individuelle une par une? Si oui, dites-moi comment.
C'est l'approche à suivre si les images nécessitent une sécurité individuelle lors du téléchargement. Sécuriser vos téléchargements d'images est possible avec la première approche que vous avez donnée, et encore une fois, cette approche vous fera télécharger l'image deux fois.
Q1. Dois-je renvoyer juste une liste d'urls d'image au client? Si oui, comment le client doit-il rendre les images à partir de ces URL.
Réponse: Renvoie la liste des URL à angular. Angular utilisera ce code.
<div *ngFor="let image of images">
<img src={{image.ImagePath}} />
</div>
Il récupérera automatiquement les images présentes au chemin de l'url
Ans pour Que2: - Je pense que c'est possible. Mais ce ne sera pas le moyen efficace
Réponses pour Que 3: - Si vous avez une liste d'images, passer une par une n'est pas le moyen efficace. Imaginez que vous deviez transmettre 100 images, puis que vous deviez appeler l'API 100 fois. Mieux vaut donc collecter les URL d'image requises dans une liste et la transmettre au frontend
@Aakashkharat J'ai mis à jour la question, veuillez jeter un œil à la mise à jour.
@Aakashkharat cela ne fonctionne pas. Étant donné que l'API et le client sont sur des machines distinctes, les retours d'API d'URL d'image feraient référence au stockage local de la machine client angulaire.
@ShafqatShafi Désolé, j'ai manqué cette partie mise à jour dans votre question. J'ajouterai un commentaire lorsque je trouverai une solution à votre problème
@Aakashkharat cela fonctionnera si le client et le serveur sont sur la même machine. mais si nous avons différents clients sur différentes machines, cela ne fonctionnera pas.
private static final Map<String, MediaType> TYPE_MAP = new HashMap();
static {
TYPE_MAP.put("pdf", MediaType.APPLICATION_PDF);
TYPE_MAP.put("gif", MediaType.IMAGE_GIF);
TYPE_MAP.put("jpg", MediaType.IMAGE_JPEG);
TYPE_MAP.put("jpeg", MediaType.IMAGE_JPEG);
TYPE_MAP.put("png", MediaType.IMAGE_PNG);
TYPE_MAP.put("html", MediaType.TEXT_HTML);
TYPE_MAP.put("xls", MediaType.parseMediaType("application/vnd.ms-excel"));
TYPE_MAP.put("xlsx", MediaType.parseMediaType("application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"));
}
@GetMapping(value = "/preview")
public ResponseEntity<Resource> previewFile(@RequestParam String filePath) {
Resource resource = new UrlResource(Paths.get(filePath).toUri());
String fileName = testFile.png;
String extension = png;
MediaType mediaType = TYPE_MAP.getOrDefault(extension,MediaType.APPLICATION_OCTET_STREAM);
return ResponseEntity.ok()
.header(HttpHeaders.CONTENT_DISPOSITION, "filename=\"" + fileName + "\"")
.contentType(mediaType)
.body(file);
}
Send filePath to the angular client and use this service in order to preview that file.
C'est gentil à vous de publier une réponse qui prend en charge plusieurs extensions de fichiers. Mais je fais déjà ça. L'inconvénient de cette approche est qu'elle nécessitera plus d'appels de service en fonction du nombre d'images d'un produit au lieu de 1. Si vous avez une meilleure approche, veuillez la suggérer.
@ShafqatShafi Ensuite, placez les images sur un chemin et écrivez la règle nginx pour accéder à ces images. Et envoyez ces chemins à votre client. btw Merci pour votre compliment.