Receive net::ERR_FILE_NOT_FOUND message but working image link shows in HTML

Question

I am putting together a weather app suing weatherapi. I can retrieve the general weather but I get a net::ERR_FILE_NOT_FOUND message for the icon, however the icon url shows in the HTML and is working when I open it in a new tab. I also receive undefined for the temp and feelslike queries.

Any help would be appreciated please.

My javascript code below:

const 
    search = document.getElementById("keyword"),
    submitBtn = document.getElementById("submit-button"),
    cityName = document.getElementById("city"),
    showDate = document.getElementById("date"),
    showTime = document.getElementById("time"),
    showWeather = document.querySelector("#weather h1"),
    weatherPic = document.querySelector("#weather div"),
    temperature = document.querySelector("#temperature"),
    feelsLike = document.querySelector("#feels-like");
    
async function getWeather(e) {
    const keyword = document.querySelector("#keyword").value;
    e.preventDefault();
    console.log(keyword);
    const response = await fetch(`http://api.weatherapi.com/v1/current.json?key=179428b368194d318d421509232011&q=${keyword}`, {mode: 'cors'});
    const weatherData = await response.json();
    console.log(weatherData);

    const city = keyword.charAt(0).toUpperCase() + keyword.slice(1);
    cityName.innerText = city;

    showWeather.innerText = weatherData.current.condition.text;
    const weatherImg = document.createElement("img");
    weatherImg.setAttribute("id", "weather-img");
    weatherImg.src = weatherData.current.condition.icon;

    const showTemp = document.createElement("span");
    const showFeelsLike = document.createElement("span");
    showTemp.innerText = weatherData.current.condition.temp_c;
    showFeelsLike.innerText = weatherData.current.condition.feelslike_c;
  
    weatherPic.appendChild(weatherImg);

    
    temperature.appendChild(showTemp);
    feelsLike.appendChild(showFeelsLike);
};

submitBtn.addEventListener("click", getWeather);

<div id="wrapper">

        <header>

            <div id="logo"><img src="images/myweatherapp.png" alt="My Weather App"> 
            <h2>My Weather App</h2></div>
            <div id="search">
                <form>
                    <input type="text" id="keyword" name="search-term" placeholder="City name">
                    <input type="submit" id="submit-button" value=">>">
                </form>
            </div>
        </header>

        <section id="content">
            <div id="content-header">
                <h1>The weather in <span id="city">{Search for your city}</span> today!</h1>
                <div id="weather">
                    <div></div>
                    <h1></h1>
                </div>
            </div>
            <p id="date"></p><p id="time"></p>

            <div id="weather-report">
                <div id="temperature"></div>
                <div id="feels-like"></div>


            </div>

        </section>

    </div>

EDIT: For some reason the icon showed when I pasted it into this code snippet thing but it doesn't show on browser. The other items still showed as undefined!

Answer 1

try: weatherImg.src = "https:" + weatherData.current.condition.icon; for some reason the default is file:// and you are looking for https://

Best Regards.