# Display a Random Image Using the Unsplash API
**URL:** https://forum.kirupa.com/t/display-a-random-image-using-the-unsplash-api/653866
**Category:** web dev
**Created:** [October 5, 2022, 12:39am UTC](https://forum.kirupa.com/t/display-a-random-image-using-the-unsplash-api/653866 "2022-10-05T00:39:34Z")
**Posts on this page:** 12
**Page:** 1
### Author:  [@kirupa](https://forum.kirupa.com/u/kirupa)
#### Post date: [October 5, 2022, 12:39am UTC](https://forum.kirupa.com/t/display-a-random-image-using-the-unsplash-api/653866/1 "2022-10-05T00:39:34Z")
This is the companion topic to the **Display a Random Image Using the Unsplash API** coding exercise:
> **[Display a Random Image Using the Unsplash API : Frontend Coding Exercises](https://www.kirupa.com/codingexercises/display_random_image_unsplash.htm)**
>
> Navigate the fun world of APIs in this coding exercise where you display a random image from Unsplash.
---
### Author:  [@BJJB](https://forum.kirupa.com/u/BJJB)
#### Post date: [April 17, 2023, 12:14pm UTC](https://forum.kirupa.com/t/display-a-random-image-using-the-unsplash-api/653866/2 "2023-04-17T12:14:31Z")
Here’s my solution, your YouTube example was very helpful, but I could not get the "let clientID = " line to work with my client ID on macOS, so I just included it in the Unsplash API URL. Thank you.
```auto
Display Random Image
Random Unsplash Image
Photo by NAME on Unsplash!
```
---
### Author:  [@kirupa](https://forum.kirupa.com/u/kirupa)
#### Post date: [April 17, 2023, 3:27pm UTC](https://forum.kirupa.com/t/display-a-random-image-using-the-unsplash-api/653866/3 "2023-04-17T15:27:01Z")
Hi @BJJB - welcome to the forums 😀
Glad you got it working! Would you mind posting your version as shown in the video? Having the API key embedded in the URL is the end result of what I was showcasing in the video by having the clientID be stored in a separate variable.
---
### Author:  [@BJJB](https://forum.kirupa.com/u/BJJB)
#### Post date: [April 17, 2023, 6:44pm UTC](https://forum.kirupa.com/t/display-a-random-image-using-the-unsplash-api/653866/4 "2023-04-17T18:44:36Z")
Here is my code with an Unsplash API key. Note I could not get the "let clientID = " line to work as described in your YouTube example, so I included the API key in the URL on the next line “let endpoint =” which seems to work. See the commented text.
```auto
Display Random Image
Random Unsplash Image
Photo by NAME on Unsplash!
```
---
### Author:  [@kirupa](https://forum.kirupa.com/u/kirupa)
#### Post date: [April 17, 2023, 7:01pm UTC](https://forum.kirupa.com/t/display-a-random-image-using-the-unsplash-api/653866/5 "2023-04-17T19:01:32Z")
Oh, sorry! I didn’t mean for you to post your clientID itself into the code. I edited your post to remove it before it gets indexed forever 🙂
What I meant was what your code looked like when you had the `clientID` variable passed into the `endpoint` variable. I wonder if there was a syntax error that prevented it from working.
---
### Author:  [@BJJB](https://forum.kirupa.com/u/BJJB)
#### Post date: [April 17, 2023, 11:19pm UTC](https://forum.kirupa.com/t/display-a-random-image-using-the-unsplash-api/653866/6 "2023-04-17T23:19:22Z")
No worries, that Client ID is one someone posted on Git or Stack that still works.
The following is what I get when I used the exact method from your YouTube example (basically no change from the starting point you provided on Code Pen):
this is the non-functional code:
```auto
Display Random Image
Random Unsplash Image
Photo by NAME on Unsplash!
```
---
### Author:  [@BJJB](https://forum.kirupa.com/u/BJJB)
#### Post date: [April 17, 2023, 11:25pm UTC](https://forum.kirupa.com/t/display-a-random-image-using-the-unsplash-api/653866/7 "2023-04-17T23:25:15Z")
this what the working example looks like (client ID redacted):
```auto
Display Random Image
Random Unsplash Image
Photo by NAME on Unsplash!
```
---
### Author:  [@kirupa](https://forum.kirupa.com/u/kirupa)
#### Post date: [April 18, 2023, 1:08am UTC](https://forum.kirupa.com/t/display-a-random-image-using-the-unsplash-api/653866/8 "2023-04-18T01:08:20Z")
Ah! I see what is going on here. You need to insert the API key into the contents of the URL stored by the `endpoint` variable! You can see me doing this at the 8:35 mark in the video:
[ ](https://www.youtube.com/watch?v=e8p1zSNmK7Q&t=517s)
The end result should still be the same as what you have with the API key manually inserted, so neither approach is better or worse. I was just curious, for it could have been that my video was wrong!
🙃
---
### Author:  [@BJJB](https://forum.kirupa.com/u/BJJB)
#### Post date: [April 18, 2023, 1:47am UTC](https://forum.kirupa.com/t/display-a-random-image-using-the-unsplash-api/653866/9 "2023-04-18T01:47:47Z")
My prior post wasn’t correct, the non-functioning code I used was:
```auto
Display Random Image
Random Unsplash Image
Photo by NAME on Unsplash!
```
---
### Author:  [@kirupa](https://forum.kirupa.com/u/kirupa)
#### Post date: [April 18, 2023, 2:05am UTC](https://forum.kirupa.com/t/display-a-random-image-using-the-unsplash-api/653866/10 "2023-04-18T02:05:57Z")
Oh! I found the issue. It is a bit subtle. We are using the string literal syntax to place the `clientID` value into the URL we are creating with `endpoint`.
To do that, we need to wrap our string value for endpoing in a backtick character: ` instead of a quotation mark: " as shown below:
```auto
let endpoint = `https://api.unsplash.com/photos/random/?client_id=${clientID}`;
```
I describe this in more detail here:
> **[Combining Strings and Variables](https://www.kirupa.com/javascript/combining_strings_variables.htm)**
>
> Learn how to combine strings made up of static text and variable values using both the concatenation and template literal approaches.
Here is the full code:
```auto
let clientID = "IvbMghKxN0pdegdJGnZZ9rSLThS9qdWn5lzg8abY5NY";
let endpoint = `https://api.unsplash.com/photos/random/?client_id=${clientID}`;
let imageElement = document.querySelector("#unsplashImage");
let imageLink = document.querySelector("#imageLink");
let creator = document.querySelector("#creator")
fetch(endpoint)
.then((response) => response.json())
.then((jsonData) => {
imageElement.src = jsonData.urls.full;
imageLink.setAttribute("href", jsonData.links.html);
creator.innerText = jsonData.user.name;
creator.setAttribute("href", jsonData.user.portfolio_url);
})
.catch((error) => {
console.log("Error: " + error);
});
```
---
### Author:  [@BJJB](https://forum.kirupa.com/u/BJJB)
#### Post date: [April 18, 2023, 2:30am UTC](https://forum.kirupa.com/t/display-a-random-image-using-the-unsplash-api/653866/11 "2023-04-18T02:30:03Z")
that did it! 👍. part of the issue was my browser originally showed the video at low res 360P so ` looks like ’ and { looks like [ or ( etc. Thank you.
---
### Author:  [@davidoliver](https://forum.kirupa.com/u/davidoliver)
#### Post date: [April 20, 2023, 4:55am UTC](https://forum.kirupa.com/t/display-a-random-image-using-the-unsplash-api/653866/13 "2023-04-20T04:55:12Z")
To display a random image using the Unsplash API, you can follow these steps:
Go to the Unsplash website and sign up for an API key.
Once you have your API key, you can use it to make requests to the Unsplash API. In this case, you will use the following endpoint to retrieve a random image: [https://api.unsplash.com/photos/random](https://api.unsplash.com/photos/random)
You can make a GET request to this endpoint using a programming language of your choice. Here is an example using JavaScript and the Fetch API:
javascript
Copy code
fetch(‘[https://api.unsplash.com/photos/random?client\_id=YOUR\_ACCESS\_KEY](https://api.unsplash.com/photos/random?client_id=YOUR_ACCESS_KEY)’)
.then(response =\> response.json())
.then(data =\> {
const imageUrl = data.urls.regular;
const imageAlt = data.alt\_description;
const imageElement = document.createElement(‘img’);
imageElement.src = imageUrl;
imageElement.alt = imageAlt;
document.body.appendChild(imageElement);
})
.catch(error =\> {
console.error(‘Error fetching random image’, error);
});
In this example, we are making a request to the random image endpoint and passing our API key as a query parameter. When we receive a response, we extract the image URL and alt description from the JSON data and create an img element with the image source and alt attributes. Finally, we append the img element to the body of the document.
You can customize the request by adding additional parameters to the endpoint URL, such as orientation, query, or collections, to retrieve images that match specific criteria.