Використання медіа в AWS S3

У попередньому розділі ми створили бакет і налаштували його відповідно до наших потреб. Тепер давайте дізнаємося, як завантажувати та використовувати медіа файли в нашому бакеті.

Спочатку нам потрібно відкрити вкладку Objects і натиснути кнопку Upload:

Нам буде представлено меню, де ми можемо вибрати файли або папку з файлами для завантаження. Наразі для нас S3 працює аналогічно до Google Drive, наприклад.

Примітка

Google Drive також є сервісом хмарного зберігання, але він надає менший набір інструментів для роботи з даними. Тому для програмування AWS S3 набагато частіше використовується, і саме це ми робимо.

Вам потрібно вибрати будь-яке зображення та завантажити його на платформу; у нашому випадку це буде зображення черепахи.

Після завантаження ми відкриваємо завантажений файл, і з'являється наступна інформація:

До речі, ось як виглядає наша черепаха:

Як використовувати це зображення в наших проектах?

Щоб використовувати цей файл, ми вже правильно налаштували бакет, щоб ми могли отримати до нього доступ з будь-якого джерела.

Давайте напишемо невелику HTML-сторінку з місцем для цього фото.

Ми можемо вставити фото за допомогою посилання в тег <img> в HTML.

Код для цього фото виглядатиме так:

Як ви можете бачити, коли код виконується, фото цієї черепахи відображається для нас.

Все, що ми зробили, це написали посилання на зображення нашої черепахи в HTML тег.

Примітка

Зверніть увагу, що фото цієї черепахи не знаходиться у файлах цього сайту, і воно може не бути завантажене локально на вашому пристрої. Цей файл зберігається на AWS S3, звідки ми отримуємо його і відображаємо на будь-якій сторінці.

Ви також можете безпосередньо отримати доступ до цього зображення, перейшовши за цим посиланням.

Тепер давайте напишемо невелику HTML сторінку, де ми опишемо черепаху і дамо користувачу можливість її нагодувати.

Код виглядатиме так:

Для вашої зручності, я також додав код для сторінки з черепахою у блок на сайті:

Таким чином, ми можемо вбудовувати різні медіа, які ми завантажили на S3, у наші HTML сторінки, так само, як ми зробили з зображенням черепахи. Ми просто вставляємо посилання на зображення в тег img, і отримуємо результат.

Чудова робота!