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

Question

我正在尝试为基本网站使用天气 api，我也想使用图标。该请求在两种环境中均有效，但在我的本地环境中，图标

出现错误

GET file://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}会显示"partly cloudy"但是图标不显示。有什么建议吗？

更新：似乎在实时服务器上运行良好。

Answer 1

可能是因为 Cross-Origin 请求策略 (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}>。

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre><code>    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 中的图标 return 作为 protocol-relative URL（没有方案）//url。
在本地它将使用 file:// 协议，并假定您所引用的资源在本地计算机上，但事实并非如此。

要在本地避免此问题，请将 http: 或 https: 添加到图像 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>

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

image from ajax request loads in codepen but not local environment

javascript

api

ajax

jquery

weather