I am currently trying to fetch a URL an display an array of images on a webpage. I have my HTML and JS code below, my problem is when I try to set the image source as the URL (image.src = data[i];) I get the error: GET file:///C:/Users/Rachel/Downloads/Module%209%20Competencies/21/undefined net::ERR_FILE_NOT_FOUND.

Both of the files were extracted from a zip folder and are in the same directory. Any help or resources are much appreciated to fix this issue, thanks so much!

HTML:

Javascript:

function load() {

fetch("https://dog.ceo/api/breed/husky/images") .then(function(result){ return result.json(); }) .then(function(data){ createHTML(data); }); }

function createHTML(data){

let main = document.getElementsByTagName("main")[0]; let h1 = document.createElement("h1"); let ul = document.createElement("ul"); h1.innerHTML = "Huskies"; main.appendChild(h1); let count = data.length; for (let i = 0; i < count; i++) {

let li = document.createElement("li"); let image = document.createElement("img"); let label = document.createElement("label");

label.innerHTML = data[i]; image.src = data[i]; // **When this is removed, there are no errors but the images do not display. When this is added, I get the ERR_FILE_NOT_FOUND error. image.width = 100; image.height = 100;

li.appendChild(image); li.appendChild(label); ul.appendChild(li); }

main.appendChild(ul); }

document.addEventListener("DOMContentLoaded", load);