Utilisation des Médias avec AWS S3
Glissez pour afficher le menu
Découverte de la procédure de téléversement et d’utilisation de fichiers médias dans le compartiment.
Commencer par ouvrir l’onglet Objects et cliquer sur le bouton Upload.
Une fenêtre permettant de sélectionner des fichiers ou un dossier contenant des fichiers à téléverser s’affiche. Actuellement, pour notre usage, S3 fonctionne de manière similaire à Google Drive, par exemple.
Google Drive est un autre service de stockage cloud, mais il propose un ensemble d’outils limité pour la gestion des données. Pour les besoins de la programmation, AWS S3 est beaucoup plus largement utilisé, c’est pourquoi nous l’utilisons ici.
Vous devez sélectionner n’importe quelle image et la téléverser sur la plateforme ; dans notre cas, il s’agira d’une photo de tortue.
Après le téléversement, ouvrez le fichier téléversé et les informations suivantes apparaîtront :
Voici à quoi ressemble notre tortue :
Comment utiliser cette image dans nos projets ?
Pour utiliser ce fichier, nous avons déjà configuré le bucket correctement afin d’y accéder depuis n’importe quelle source.
Écrivons une petite page HTML avec un emplacement pour cette photo.
Nous pouvons insérer la photo en utilisant un lien dans la balise <img> en HTML.
Le code pour cette photo ressemblera à ceci :
index.html
Comme vous pouvez le voir, lorsque le code s’exécute, la photo de cette tortue s’affiche pour nous.
Tout ce que nous avons fait, c’est écrire un lien vers l’image de notre tortue dans la balise HTML.
La photo de la tortue n'est pas stockée dans les fichiers de ce site web, ni téléchargée localement sur votre appareil. À la place, ce fichier est stocké sur AWS S3, que nous utilisons pour y accéder et l'afficher sur n'importe quelle page.
Vous pouvez également accéder directement à cette image en suivant ce lien.
À présent, écrivons une petite page HTML où nous décrivons la tortue et donnons à l'utilisateur la possibilité de la nourrir.
Le code ressemblera à ceci :
index.html
style.css
script.js
Merci pour vos commentaires !
Demandez à l'IA
Demandez à l'IA
Posez n'importe quelle question ou essayez l'une des questions suggérées pour commencer notre discussion
