Javascript 来自ajax请求的图像在codepen中加载，但不在本地环境中加载

我正在尝试使用一个基本网站的天气api，我也想使用图标。请求在这两种环境中都有效，但在我的本地环境中，图标出现错误

得到file://cdn.apixu.com/weather/64x64/night/116.png net:：找不到错误文件

我认为它与https有关，但可能不是，因为只有图像不会加载

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>`
}

const key='b7e1e81e6228412cbfe203819180104'；
常量url=`https://api.apixu.com/v1/current.json?key=${key}&q=auto:ip`
const main=document.getElementById（'main'）；
$.getJSON（url，函数（json）{
const loc=json.location；
const cur=json.current；
const condition={text:cur.condition.text，icon:cur.condition.icon}
main.innerHTML=`${condition.text}`
}

因此，

${cur.condition.text}

将显示“部分混浊”，但图标不显示。有什么建议吗

---

更新：live server似乎工作正常。

这可能是因为跨源请求策略（CORS）可能不允许这样做。请确保允许您访问这些资源

阅读更多关于CORS的信息

第二,

<img src = ${condition.icon}>

---

As图标在JSON中作为协议相对URL返回（不带方案）

/URL

。
在本地，它将使用

文件：//

协议，并假定您所引用的资源位于本地计算机上，但不是。

要在本地避免此问题，请将

http:

或

https:

添加到image

src

中，如

    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>`
        })

const key='b7e1e81e6228412cbfe203819180104'；
常量url=`https://api.apixu.com/v1/current.json?key=${key}&q=auto:ip`
const main=document.getElementById（'main'）；
$.getJSON（url，函数（json）{
const loc=json.location；
const cur=json.current；
常数条件={
text:cur.condition.text，
图标：cur.condition.icon
}
main.innerHTML=`${condition.text}`
})

您的img语法错误，
=
周围不应该有空格，值应该用
"
。condition.icon
的值是多少？它似乎试图获取一个
文件，而不是
URL
。感谢您对空格的提醒，但我不能在变量周围加引号，因为这样它们将被读取为字符串文本。不过，我认为这不是问题，因为condition.text正在工作g好的。condition.icon的值是请共享您的HTML代码。您是否在本地测试您的文件，因此URL以
文件开始：
？它们不是我的文件。我是从一个天气api生成的json文件中提取它们的。我切换到live server，它现在正在工作。我仍然很好奇为什么，所以我将保留这个问题。感谢您的帮助你的帮助。这就是我所想的，但它并没有解释为什么完全相同的代码在codepen.com上工作，而唯一不能在本地工作的部分是图像。我没有使用引号，因为它们是es6模板文本。codepen.com可能正在解析无效的HTML，但这并不意味着你应该编写无效的HTML。请阅读我提供的链接，并遵循HTML标准，以避免类似的错误。


    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>`
        })