Question

我正在尝试将天气API用于基本网站，我也想使用这些图标。该请求适用于这两种环境，但在我的本地环境中，我收到图标

的错误

获取文件：//cdn.apixu.com/weather/64x64/night/116.png net :: ERR_FILE_NOT_FOUND

我认为它与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>`
}

所以${cur.condition.text}会显示“部分阴天”，但图标不会显示。有什么建议吗？

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

Answer 1

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

https://enable-cors.org/阅读有关CORS的更多信息。

其次，

<img src = ${condition.icon}>

应该是

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

您忘记了引号。

https://www.w3schools.com/tags/tag_img.asp - 阅读有关图片代码的更多信息。

另外使用以下代码：

同时将http:添加到图片src，例如<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 2

作为图标返回JSON作为协议相对URL（没有方案）//url。
在本地，它将使用file://协议，并假设您所指的资源位于本地计算机上，但事实并非如此。

要避免此问题，请将http:或https:添加到图片src，例如<img src=http:${condition.icon}>。

＆＃13;

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

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="main"></div>

＆＃13;

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

2 个答案: