How to use Unsplash Image API for Beginners

If you’re a developer and want to enrich your app’s UI with high-quality free images, then Unsplash is your best bet. Unsplash is a platform that allows you to access over a million free high-resolution photos, images, and wallpapers.

The best part about Unsplash is that all the images are royalty-free, which means you can use them in your commercial projects without any attribution requirement. In this tutorial, you will learn how to use Unsplash Image API in your application.

Step 1: Create an Unsplash Account

To start using Unsplash Image API, you need to create an account on their website. Go to Unsplash.com and click on the “Join” button. Fill out the sign-up form by providing your name, email, and password.

Step 2: Create an Unsplash Developer Account

After creating your Unsplash account, you need to create an Unsplash Developer account. Visit Unsplash Developer page and click on the “Join Now” button. You need to fill out the form by providing your developer details like your name, company, etc., and agree to the terms of the API.

Step 3: Get Your Unsplash API Key

After creating an Unsplash Developer account, you need to obtain an API key that will allow your application to access the Unsplash Image API. Visit the Unsplash Developer Dashboard and click on the “New Application” button. Fill out the form by providing your application details like name, description, etc.

After creating your application, you will receive an Access Key and a Secret Key. Store these keys in a safe place as they will be used in your application to access the Unsplash Image API.

Step 4: Using Unsplash Image API

Now that you have your API key, you can start using the Unsplash Image API. First, you need to include the Unsplash Image API in your HTML file by adding the following script tag:

<script src="https://unpkg.com/@jjwallace42/[email protected]/dist/unsplash.min.js"></script>

After including the Unsplash Image API, you need to initialize it by providing your API key:

<script>
      const unsplash = new Unsplash({ accessKey: 'YOUR_ACCESS_KEY' });
    </script>

After initializing Unsplash, you can start using its features. Here is a code snippet that retrieves a random image from the Unsplash API:

unsplash.photos.getRandomPhoto()
      .then(response => {
        console.log(response);
      })

Conclusion

Using the Unsplash Image API in your application is a great way to add high-quality free images. In this tutorial, you learned how to use the Unsplash Image API by creating an Unsplash Developer account, obtaining an API key, and using it in your app. Happy coding!

How to use Unsplash image API for beginners