Question 239960 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – API Images not displaying

I am trying to get the images for this API to display for the different cards I have set up but I can’t get them to work. Any idea what I could be doing wrong? I tried looking at the console as well by inspecting the web page i’m creating (https://apitestapp.glitch.me/) but I can’t get it to work.

const URL = "https://iskarr.github.io/austindonovan.github.io/api/business.json";

let cards = document.querySelector("div.cards");
let para = document.createElement("p");

fetch(URL)
  .then((response) => response.json())
  .then((jsObject) => {
    let business = jsObject.business;

    for (let i = 0; i < business.length; i++) {
      let card = document.createElement("section");
      card.className = "card";

      let h2 = document.createElement("h2");
      h2.textContent = business[i].name;
      card.appendChild(h2);

      let img = document.createElement("img");
      let imageUrl = "https://iskarr.github.io/austindonovan.github.io/images/" + business[i].image; // Construct image URL
      console.log("Image URL:", imageUrl); // Log the image URL
      img.src = imageUrl;
      img.alt = business[i].name;
      card.appendChild(img);

      let pLocation = document.createElement("p");
      pLocation.textContent = "Location: " + business[i].location;
      card.appendChild(pLocation);

      let pDescription = document.createElement("p");
      pDescription.textContent = business[i].description;
      card.appendChild(pDescription);

      cards.appendChild(card);
    }
  });

I want the images from the API that i’m calling to appear in the cards for every restaurant.

Tags:

2

Answers


  1. 0

    Based on the code provided, it seems that you are trying to fetch data from an API and display images for each restaurant in the cards. However, the images are not displaying correctly. Here are a few things you can check to troubleshoot the issue:

    1. Check the Image URLs: Make sure that the image URLs you are constructing are correct. In your code, you are appending the business[i].image value to the base URL. You can log the imageUrl variable to the console to verify that the URLs are being constructed correctly. Also, ensure that the image files exist at the specified URLs.

    2. Check the Image Element: Verify that the img element is being created correctly and appended to the card element. You can inspect the generated HTML in the browser’s developer tools to see if the img elements are present and if the src and alt attributes are set correctly.

    3. Check for Errors: Inspect the browser’s console for any error messages related to loading the images. If there are any errors, they can provide valuable information about what might be going wrong.

    4. Cross-Origin Resource Sharing (CORS): If the image URLs are from a different domain than the one hosting your web page, you might encounter CORS issues. Check if the server hosting the images allows cross-origin requests. If not, you may need to configure the server to include the appropriate CORS headers.

    5. Network Issues: Ensure that you have a stable internet connection and that the images can be accessed from your network. Sometimes, network issues can prevent the images from loading.

    By checking these points, you should be able to identify and resolve the issue with the images not displaying in your cards.

    Login or Signup to reply.
  2. 0

    It seems your business.json has a field called imageurl which contains the full url of an image.

    json

    You may change your imageUrl accordingly:

    let imageUrl = business[i].imageurl;

    Full code:

    const URL = 'https://iskarr.github.io/austindonovan.github.io/api/business.json';

let cards = document.querySelector('div.cards');
let para = document.createElement('p');

fetch(URL)
    .then(response => response.json())
    .then(jsObject => {
        let business = jsObject.business;

        for (let i = 0; i < business.length; i++) {
            let card = document.createElement('section');
            card.className = 'card';

            let h2 = document.createElement('h2');
            h2.textContent = business[i].name;
            card.appendChild(h2);

            let img = document.createElement('img');
            let imageUrl = business[i].imageurl;
            console.log('Image URL:', imageUrl); // Log the image URL
            img.src = imageUrl;
            img.alt = business[i].name;
            card.appendChild(img);

            let pLocation = document.createElement('p');
            pLocation.textContent = 'Location: ' + business[i].location;
            card.appendChild(pLocation);

            let pDescription = document.createElement('p');
            pDescription.textContent = business[i].description;
            card.appendChild(pDescription);

            cards.appendChild(card);
        }
    });

    How to debug an API call in console:

    1. Press F12 (or cmd + alt + I) to bring up the console.

    2. In the Network tab you can see all the API calls. Find the one called business.json. (If you cannot find the call, try to refresh the page while having the console open.)

    3. Click on business.json entry, in the Preview tab you shall see the json content.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search