Comment servir une pyramide d'images à l'avant?

Question

Je crée une pyramide d'image composée de quelque part entre 20-50 images dans environ 5 répertoires. Quelle est la meilleure façon de servir cela à l'avant? Hébergez les répertoires quelque part, ils peuvent être référencés directement? Cela ne semble pas du tout sûr. Servir tous les 50 individuellement via une API? Cela semble assez lourd. Je ne suis pas sûr que ça marchera. Je crois qu'ils doivent être dans la structure de répertoire pour interagir avec les composants frontaux de toute façon. Est-ce possible?

Un conseil est apprécié.

Answer 1

La réponse à cette question dépend du nombre de facteurs. Une façon de le configurer serait de simplement héberger les fichiers image sur votre serveur web et d'utiliser un cloudflare comme cdn pour mettre en cache le site entier. Le cdn est crucial ici parce que sinon vos actifs peuvent prendre beaucoup de temps à charger.

étapes de haut niveau pour régler cette place serait de configurer un répertoire statique de votre serveur Web de nœud afin que vos biens sont accessibles par le navigateur via une URL comme ceci: http://localhost/static/images/image.png

En supposant que vous utilisez webpack , vous pouvez utiliser file-loader pour simplement import les fichiers image comme tout autre fichier js et l'utiliser dans vos composants de réaction. Lorsque vous créez l'application, vous pouvez configurer file-loader pour remplacer automatiquement les références aux chemins d'accès au fichier image par celle de l'URL de votre page Web. Enfin, si vous avez seulement cinq répertoires d'images, vous pouvez créer 5 routes appartenant à chaque répertoire de votre application de réaction, et dans chaque route, importez les images que l'itinéraire montrera (par exemple import image from './static/images/image.png' ou import * as images from './static/images/album'), et restituez-le (ex: <img src={image} /> ou bouclez le tableau d'images et restituez chacun).