来自 ajax 请求的图像加载到 codepen 但不是本地环境答案

【问题标题】：image from ajax request loads in codepen but not local environment来自 ajax 请求的图像加载到 codepen 但不是本地环境
【发布时间】：2018-09-11 05:35:35
【问题描述】：

我正在尝试将天气 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} 将显示“部分多云”，但图标不显示。有什么建议吗？

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

【问题讨论】：

您的 img 语法错误，= 周围不应有空格，值应由" 包围。 condition.icon 的值是多少？看起来它正在尝试获取 File 而不是 URL。
感谢有关空格的提示，但我不能在变量周围加上引号，因为那样它们将被读取为字符串文字。我不认为这是问题所在，因为 condition.text 工作正常。 condition.icon 的值为cdn.apixu.com/weather/64x64/night/116.png
请分享您的 HTML 代码
您是在本地测试您的文件，所以 URL 以 file: 开头？
它们不是我的文件，我是从天气 api 生成的 json 文件中提取它们的。我切换到实时服务器，它现在正在工作。我仍然很好奇为什么，所以我会留下这个问题。感谢您的帮助。

标签： javascript jquery ajax api weather

【解决方案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>

【讨论】：

这就是我的想法，但它并没有解释为什么完全相同的代码可以在 codepen.com 上运行，而唯一在本地不起作用的部分是图像。而且我没有使用引号，因为它们是 es6 模板文字。
Codepen.com 可能正在解析无效的 HTML，但这并不意味着您应该编写无效的 HTML。请阅读我提供给您的链接并遵循 HTML 标准以避免此类错误。

【解决方案2】：

作为图标在 JSON 中返回为协议相对 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>

【讨论】：