image from ajax request loads in codepen but not local environment

I'm trying to use a weather api for a basic website and I'd like to use the icons too. The request works in both environments, but in my local environment I get an error for the icon

GET file://cdn.apixu.com/weather/64x64/night/116.png net::ERR_FILE_NOT_FOUND

I thought it was related to https but probably not since it's only the image that won't load.

const key = 'b7e1e81e6228412cbfe203819180104';

const url = `https://api.apixu.com/v1/current.json?key=${key}&q=auto:ip`

const main = document.getElementById('main');

$.getJSON( url, function(json) {
  const loc = json.location;
  const cur = json.current;
  const condition = {text: cur.condition.text, icon: cur.condition.icon}

  main.innerHTML = `<img src = ${condition.icon}><div>${condition.text}</div>`
}

so ${cur.condition.text} will display "partly cloudy" but the icon does not display. Any advice?

update: seems to be working fine with live-server.

Answers:

Answer

It may be because the Cross-Origin Request Policy (CORS) may not allow it. Please make sure that you are allowed to access those resources.

https://enable-cors.org/ to read up more about CORS.

Secondly,

<img src = ${condition.icon}>

should be

<img src="${condition.icon}">

You are forgetting the quotation marks.

https://www.w3schools.com/tags/tag_img.asp - Read more on image tags.

Additionally use the code below:

Also add http: to image src like <img src=http:${condition.icon}>.

    const key = 'b7e1e81e6228412cbfe203819180104';

    const url = `https://api.apixu.com/v1/current.json?key=${key}&q=auto:ip`

    const main = document.getElementById('main');

    $.getJSON(url, function(json) {
          const loc = json.location;
          const cur = json.current;
          const condition = {
            text: cur.condition.text,
            icon: cur.condition.icon
          }

          main.innerHTML = `<img src="http:${condition.icon}"><div>${condition.text}</div>`
        })
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    <div id="main"></div>
Answer

As icon return in JSON as protocol-relative URL (without the scheme) //url.
Locally it will use the file:// protocol and that assumes the resource you’re referring to is on the local machine, But it's not.

To avoid this issue locally add http: or https:to image src like <img src=http:${condition.icon}>.

const key = 'b7e1e81e6228412cbfe203819180104';

const url = `https://api.apixu.com/v1/current.json?key=${key}&q=auto:ip`

const main = document.getElementById('main');

$.getJSON(url, function(json) {
      const loc = json.location;
      const cur = json.current;
      const condition = {
        text: cur.condition.text,
        icon: cur.condition.icon
      }

      main.innerHTML = `<img src =http:${condition.icon}><div>${condition.text}</div>`
    })
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="main"></div>

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.