I am Getting a Blank Image for Unsplash API

When you bring up your Console, do you see any errors? :slight_smile:

For some background on the Console, in case you need it: Console Logging Basics

ok thank you


this is the error i was getting

What kind of project are you building? Is it a web app? If so, please show me what you see in your browser console :slight_smile:

(If you are just building a static web app and not an ASP.net app, you may want to try a different project template in Visual Studio that does minimal build-time processing!)

yes i am building a website using a xammp and as a output in browser i am getting a blank image.

Can you share your browser’s console output?

ok

I don’t think you have shared your console output yet! That is a screenshot of the page itself. You bring it up through your browser’s built-in developer tools, and this article explains how you can bring it up: Console Logging Basics

That helps! Based on the error message, in your code, you have the clientID variable lowercased as clientId. If you address that, this error will go away.

ok thank you

still getting error with the json now

When you click on the 1.html:66 link in the console, what line is getting highlighted?

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading ‘regular’)

like this i am getting the above error …
imageElement.src = jsonData.urls.regular;------for this line

The reason is that your API call isn’t using the random path, which is what this example is built around. You are querying for “cars”, which returns a JSON object that is quite different and won’t have the urls property on it.

For working with the cars query, here is how your script should be modified:

let clientID = "MITl6hg33kb2Noixd7Zc0c7n8uURvDsfy0tqeMhuKGw"
let endpoint = `https://api.unsplash.com/search/photos?query=cars&client_id=${clientID}`;
let imageElement = document.querySelector("#unsplashImage");
let imageLink = document.querySelector("#imageLink");

fetch(endpoint)
  .then(function (response) {
    return response.json();
  })
  .then(function (jsonData) {
    console.log(jsonData);
    imageElement.src = jsonData.results[0].urls.regular;
    imageLink.setAttribute("href", jsonData.results[0].links.html);
  });

Below, you can see how I used the console to inspect this and figure out what to display :slight_smile:

thank you …but i was not getting achanging image when i refreshed the page i still getting the same image only

That is because your API call is for results for cars, and the results don’t change much. You could randomly cycle through the results and pick a different image each time: Random Numbers in JavaScript

Where I have [0] specified, that is where you can provide a different number to load a different image :grinning:

Ok thank you