Как получить изображения через Unsplash API с помощью Javascript

В программировании часто возникают ситуации, когда приходится загружать изображения на хостинг для использования в своих проектах, что может отнимать драгоценное время и замедлять процесс кодирования. В этом руководстве я расскажу вам о том, как легко запрашивать изображения из API для непосредственного использования в ваших проектах, используя в качестве основного примера API Unsplash.

Prerequisite

• Для работы с приведенным ниже примером необходимо базовое понимание HTML, CSS и Javascript.
• Если у вас нет установленной IDE, вы можете использовать онлайн-редактор, например Codepen или JSFiddle.

Настройка API

Для начала нам необходимо создать учетную запись разработчика у провайдера API. В данном случае мы используем API Unsplash. Теперь перейдите по ссылке documentation. Вы должны увидеть страницу, представленную ниже. Перейдите к разделу «Создание учетной записи разработчика» и нажмите кнопку «Регистрация», следуя инструкциям, и примите условия использования API.

Примечание: Сначала необходимо создать учетную запись в Unsplash.

После настройки демонстрационного приложения у вас должен быть ключ API, как показано ниже

Важно также знать, что для демонстрационных приложений можно делать только 50 запросов в час, а для приложений, находящихся в эксплуатации, — 5 000 запросов в час. Если вам необходимо сделать больше запросов, вы можете увеличить лимит или обратиться в службу поддержки. В нашем учебном пособии мы получаем изображения только для нашей простой галереи.

Перейдем к кодированию.

Кодирование и пояснения

Во-первых, мы начнем с нашей HTLM-части кода, которая должна выглядеть следующим образом

<section id="gallery">
	<div><img class="image" alt="" /></div>
	<div><img class="image" alt="" /></div>
	<div><img class="image" alt="" /></div>
	<div><img class="image" alt="" /></div>
	<div><img class="image" alt="" /></div>
	<div><img class="image" alt="" /></div>
	<div><img class="image" alt="" /></div>
	<div><img class="image" alt="" /></div>
	<div><img class="image" alt="" /></div>
	<div><img class="image" alt="" /></div>
</section>

Вход в полноэкранный режим Выход из полноэкранного режима

В этом блоке кода у нас есть секция, содержащая 10 элементов div, каждый из которых содержит элемент изображения. В настоящее время эти элементы изображений пусты, но позже мы добавим исходные файлы для изображений.

Стилизация нашей галереи

Теперь нам необходимо придать стиль нашим изображениям, чтобы они выглядели более уместно. Вставьте следующий код в часть CSS в вашей кодовой панели

/* Портфолио */
#gallery {
	width: 1200px;
	margin-left: 30px;
	margin: auto;
	padding-bottom: 30px;
	display: grid;
	grid-gap: 20px;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	box-shadow: 0 1px 5px rgba(104, 104, 104, 0.8);
}
#gallery img {
	height: 150px;
	width: 100%;
	box-shadow: 0 1px 5px rgba(104, 104, 104, 0.8);
}

Вход в полноэкранный режим Выход из полноэкранного режима

В этом CSS-блоке мы создаем галерею шириной 1200 пикселей с 30-пиксельным левым полем для горизонтального центрирования. Мы используем отзывчивый макет сетки, который адаптируется к минимальной ширине колонок в 200 пикселей с 20-пиксельным зазором между div, содержащими изображения. Наконец, мы применяем бокс-тень к изображениям и элементам div для обеспечения их видимости.

Получение изображений

Наш код был бы неполным без Javascript-аспекта для взаимодействия с API и получения изображений. Наш блок JS-кода должен выглядеть следующим образом:

// Запрос API Unsplash Images

const apiKey = 'Ваш ключ API';
const images = document.querySelectorAll('.image');

fetch(`https://api.unsplash.com/photos/random?query=restaurant&count=10&client_id=${apiKey}`)
	.then((response) => response.json())
	.then((data) => {
		data.forEach((photo, index) => {
			images[index].src = photo.urls.regular;
		});
	});

Вход в полноэкранный режим Выход из полноэкранного режима

Здесь должен быть вывод всех кодов вместе взятых

Можно сделать еще один шаг вперед, обернув наш запрос в функцию ‘getImages’. Теперь мы можем настроить эту функцию на запрос изображений через разные промежутки времени, например:

//функция getImages
function getImages() {
	fetch(`https://api.unsplash.com/photos/random?query=food&count=10&client_id=${apiKey}`)
		.then((response) => response.json())
		.then((data) => {
			data.forEach((photo, index) => {
				images[index].src = photo.urls.regular;
			});
		});
}

// Установить интервал
getImages();
setInterval(getImages, 10000);

Вход в полноэкранный режим Выход из полноэкранного режима

Здесь мы запрашиваем новые изображения с интервалом в 10 секунд (10000 миллисекунд).

Заключение

Мы рассмотрели основные аспекты получения изображений. Это может быть применимо и к другим API, кроме Unslpash. Это тот же самый метод, все, что вам нужно, это API-ключ для запроса к серверу. Теперь вы можете приступить к реализации этого метода в своих будущих проектах или приложениях.

Если вам понравилась эта статья, поддержите меня здесь и на моем GitHub

Счастливого кодинга!