Ajax请求图片在CodePen可加载本地失败，天气API图标加载异常

嘿，我来帮你搞定这个图标加载的问题！你遇到的net::ERR_FILE_NOT_FOUND错误其实和HTTPS关系不大，核心原因是本地打开网页时用的是file://协议，导致浏览器对图标URL的解析出了问题。

问题根源 #

当你在本地直接打开HTML文件时，浏览器使用的是file://协议（比如file:///C:/your-project/index.html）。如果API返回的图标URL是不带完整协议头的格式（比如//cdn.apixu.com/weather/64x64/night/116.png），浏览器会自动把它拼接成当前页面的协议——也就是file://cdn.apixu.com/...，这显然是找不到资源的，因为这个路径指向的是你本地的文件系统，而不是远程CDN服务器。

而CodePen是运行在https://环境下的，浏览器会把这种协议相对URL自动补全成https://cdn.apixu.com/...，所以图标能正常加载。

两种解决方案 #

• 方案1：强制给图标URL加上完整HTTPS协议头
  处理API返回的图标地址时，手动添加https:前缀。比如假设你从API数据里拿到icon字段是//cdn.apixu.com/weather/64x64/night/116.png，可以这样处理：

  // 假设apiData是你从API获取到的天气数据
  const iconUrl = `https:${apiData.current.condition.icon}`;
  // 然后把这个iconUrl赋值给img元素的src属性
  document.querySelector('.weather-icon').src = iconUrl;
  

• 方案2：用本地服务器运行项目
  本地开发时尽量不要直接打开HTML文件，而是启动一个本地HTTP服务器，让网页运行在http://localhost:xxxx环境下：

  • 如果你有Node.js，可以安装http-server：

    npm install -g http-server
    # 然后在项目目录下运行
    http-server
    

  • 如果你用Python，直接在项目目录下运行：

    # Python 3
    python -m http.server
    # Python 2
    python -m SimpleHTTPServer
    

  这样浏览器会用http或https协议加载页面，协议相对URL会被正确解析，图标就能正常加载了。

验证你的代码 #

你可以先检查API返回的icon字段格式，如果它本身就是不带协议的//cdn...，那用方案1就能快速解决；如果是完整的https://格式，那可能是你在赋值时不小心修改了路径，仔细排查一下代码里处理图标的部分就行。

内容的提问来源于stack exchange，提问作者TannerChrishop