LoremPicsum
DevelopmentGenerate placeholder pictures. Easy to use, stylish placeholders Just add your desired image size (width & height) after our URL, and you'll get a random image. Get a specific image by adding /id/{image} to the start of the url.
📚 Documentation & Examples
Everything you need to integrate with LoremPicsum
🚀 Quick Start Examples
// LoremPicsum API Example
const response = await fetch('https://picsum.photos/', {
method: 'GET',
headers: {
'Content-Type': 'application/json'
}
});
const data = await response.json();
console.log(data);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.
Getting Started — No API Key Required
Lorem Picsum is completely free and needs no API key, account, or authentication. You request images directly by URL and the service returns a random placeholder photo at the size you ask for.
To get a random image, append the width and height to https://picsum.photos/:
https://picsum.photos/200/300
That returns a random 200x300 image. Some common variations:
- Square image:
https://picsum.photos/200(200x200) - Specific photo:
https://picsum.photos/id/237/200/300(uses photo id 237) - Grayscale:
https://picsum.photos/200/300?grayscale - Blur:
https://picsum.photos/200/300?blur=2
Fetch it in JavaScript like any URL, or drop it straight into an <img> tag:
fetch('https://picsum.photos/200/300')
.then(response => console.log(response.url)); // final image URL
Because there is no key or signup, these URLs work anywhere. Browse the full list of photos and their IDs at https://picsum.photos/images.
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.
