javascript - gauge.js - 相对 URL 不起作用，但绝对 URL 在 Django 1.10 中起作用

Question

我一直在尝试gauge.js ，并仅在使用绝对 URL 时重现链接上显示的工作“使用”代码，但在使用相对 URL 时不会。

我在 Github Issue Tracker 上没有找到类似的内容

工作代码

<canvas id="foo"></canvas>
<script>
    var opts = {
      lines: 12,
      angle: 0.15,
      lineWidth: 0.44,
      pointer: {
         length: 0.9,
         strokeWidth: 0.035,
         color: '#000000'
      },
      limitMax: 'false', 
      percentColors: [[0.0, "#a9d70b" ], [0.50, "#f9c802"], [1.0, "#ff0000"]], // !!!!
      strokeColor: '#E0E0E0',
      generateGradient: true
    };
    var target = document.getElementById('foo');
    var gauge = new Gauge(target).setOptions(opts);
    gauge.maxValue = 3000;
    gauge.animationSpeed = 32;
    gauge.set(2250);
</script>

<script src="https://bernii.github.io/gauge.js/dist/gauge.min.js"></script>

问题

如果我用相对 URL 替换上述绝对 URL，仪表就会消失。我所做的就是从 here 复制 gauge.min.js 代码，并将文件放入我的静态文件夹中。 (下面的工作树目录)

<script src="../../static/lineoee/gauge.min.js"></script>

上面的相对 URL 应该指向一个有效的目录，但是我得到:

(index):224 Uncaught ReferenceError: Gauge is not defined at var gauge = new Gauge(target).setOptions(opts);

工作树目录

    │   ├── static
│   │   └── lineoee
│   │       ├── gauge.min.js
│   ├── templates
│   │   ├── linedetails
│   │   │   ├── index.html
│   │   │   └── index.html.save
│   │   └── lineoee
│   │       ├── index.html     <-- I am linking gauge.min.js from here
│   │       ├── index.html.save

Urls.py

from django.conf.urls import url
from django.contrib import admin
from lineoee.views import index
from lineoee.views import details

urlpatterns = [
    url(r'lineoee/$', index, name='index'),
    url(r'linedetails/', details, name='details'),
]

对我可能做错的事情有什么建议吗？

旁注:

• 我有具体的性能问题，例如互联网有限和快速重新加载时间。
• 应用程序将仅部署在本地主机上。

编辑

根据下面的答案，使用 ../static/lineoee/gauge.js 我在 python 控制台上收到以下消息:

"GET /static/lineoee/gauge.min.js HTTP/1.1" 304 0

Answer 1

相对 URL 不是相对于模板在磁盘上的位置，而是相对于当前 URL。因此，如果您使用 URL 访问该页面

http://localhost/lineoee/

Javascript 资源的相对 URL 为

../static/lineoee/gauge.min.js

这可能就是为什么对静态资源使用绝对 URL 是一个好主意的原因，因为 URL 配置总是可以更改的。我建议您使用static模板标签会为您处理这些细节:

{% load static %}
...
{% static 'lineoee/gauge.min.js' %}