Making use of the Picsum API with JavaScript

When it comes to working with images, the internet is a treasure trove of resources. With thousands of images being added every minute, web developers can easily integrate a host of images into their web pages to make them more alluring.

Picsum is one of such image providers that offers a free and open-source API serving to several use cases. In this article, we will take you through using Javascript to make HTTP requests and consume the Picsum API to get images.

What is Picsum API?

Picsum API is an online image service that generates high-quality, random, and free image placeholders for your web designs. The API accepts requests from you to generate image placeholders of different sizes and features. Just send your desired parameters to the API, and it will return a high-quality image as per your specifications.

How to use Picsum API with Javascript?

To use the Picsum API with JavaScript, you need to make an HTTP request to the API, specifying the parameters you’re interested in. You can use various popular Javascript libraries like Axios, Fetch API, or NodeJS in the backend to make HTTP requests.

Example code using Fetch API

Here’s an example of how you can use the Fetch API to make an HTTP request to the Picsum API:

fetch('https://picsum.photos/200/300').then((response) =>
    console.log(response.url)
);

The code above is used to make an HTTP GET request to the Picsum API to get an image of 200 pixels wide and 300 pixels tall. Upon receiving the response object, the URL of the image is logged to the console.

Example code using Axios

Here’s an example of how you can use Axios to make an HTTP request to the Picsum API:

axios
    .get('https://picsum.photos/200/300')
    .then((response) => console.log(response.request.responseURL));

This code above makes the same HTTP GET request to Picsum API using Axios library and logs the image URL.

Conclusion

The Picsum API is undoubtedly a great resource for web developers who want to create stunning visual designs. By making use of the example codes with Axios or Fetch API, they can access the wealth of images on the internet and integrate them effortlessly into their web development projects. Get creative and start exploring the Picsum API.