如何让倒计时脚本从其他文件夹/远程地址调用数字图片？

自己编写了一段JavaScript倒计时脚本，当代码与数字图片（digits）位于同一文件夹时，脚本可正常调用图片显示倒计时数字。但尝试将<img>标签的src属性修改为远程地址（https://okoutdoors.com/img/[数字].gif）后，无法成功加载图片。

相关代码如下：

原JavaScript代码 #

function getImg(num) {
  var digits = String(num).split(""),
    text = "";
  for (var i = 0; i < digits.length; i++) {
    text += '<img alt="' + digits[i] + '" src="' + digits[i] + '.gif" />';
  }
  return text;
}

CountDownTimer('02/19/2024 10:1 AM', 'countdown');
CountDownTimer('02/20/2024 10:1 AM', 'newcountdown');

function CountDownTimer(dt, id) {
  var end = new Date(dt);

  var _second = 1000;
  var _minute = _second * 60;
  var _hour = _minute * 60;
  var _day = _hour * 24;
  var timer;

  function showRemaining() {
    var now = new Date();
    var distance = end - now;
    if (distance < 0) {

      clearInterval(timer);
      document.getElementById(id).innerHTML = 'EXPIRED!';

      return;
    }
    var days = Math.floor(distance / _day);
    var hours = Math.floor((distance % _day) / _hour);
    var minutes = Math.floor((distance % _hour) / _minute);
    var seconds = Math.floor((distance % _minute) / _second);

    document.getElementById(id).innerHTML = getImg(days) + 'days ' +
      getImg(hours) + 'hrs ' +
      getImg(minutes) + 'mins ' +
      getImg(seconds) + 'secs';
  }

  timer = setInterval(showRemaining, 1000);
}

原HTML代码 #

<html>

<head>

</head>

<body>
  <div id="countdown"></div>
  <div id="newcountdown"></div>
</body>

</html>

尝试修改的代码行 #

text += '<img alt="'+digits[i]+'" src="https://okoutdoors.com/img/'+digits[i]+'.gif" />'; 

1. 验证远程图片资源的可用性 #

手动访问具体的图片URL（比如https://okoutdoors.com/img/0.gif、https://okoutdoors.com/img/1.gif），确认：

• 图片是否存在（返回200状态码）
• 文件名是否正确（比如是否是.gif格式、有没有大小写错误）
• 路径是否正确（比如是否是/img/而不是/images/）

如果访问返回404，说明远程地址或文件名有误，需要修正为正确的资源路径。

2. 排查跨域问题 #

打开浏览器控制台（F12），切换到Network标签，查看图片请求的状态：

• 如果出现跨域相关报错（比如No 'Access-Control-Allow-Origin' header is present），说明远程服务器未配置CORS策略，浏览器阻止了跨域资源加载。
  • 解决方式：要么联系远程服务器管理员配置CORS，要么更换为同域的图片资源。

3. 优化代码路径拼接 #

将图片基础地址抽离为独立变量，避免硬编码出错，同时使用模板字符串简化拼接逻辑，减少语法错误：

function getImg(num) {
  // 抽离基础地址，方便修改和排查
  const baseImgUrl = 'https://okoutdoors.com/img/';
  var digits = String(num).split(""),
    text = "";
  for (var i = 0; i < digits.length; i++) {
    // 使用模板字符串拼接，更清晰不易出错
    text += `<img alt="${digits[i]}" src="${baseImgUrl}${digits[i]}.gif" />`;
  }
  return text;
}

4. 调试技巧 #

通过浏览器控制台的Console和Network面板定位问题：

• Console面板：查看是否有JavaScript语法错误或资源加载报错
• Network面板：查看图片请求的URL、状态码、响应内容，确认请求是否正确发送

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