[英]HTML in NodeJS static folder can't load assets with relative path
I use a static folder for a NodeJS website, but strangely, in the index.html I still need to include a path to the folder that contains the files. 我为NodeJS网站使用一个静态文件夹,但是奇怪的是,在index.html中,我仍然需要包含该文件的文件夹的路径。
Adding the folder name to the path solves the problem, but only in the initial index.html
page that is served. 将文件夹名称添加到路径可以解决此问题,但只能在提供的初始index.html
页面中。 In any following pages (after clicking a hyperlink in the site), suddenly the folder name can NOT be part of the path! 在随后的任何页面中(单击站点中的超链接后),文件夹名称突然都不是路径的一部分!
FOLDER 夹
dist
└── viewer
├── index.html
├── test.html
├── style.css
└── game.js
NODE 节点
app.use(express.static('dist'))
app.get('/viewer', function (req, res) {
res.sendFile(__dirname + '/viewer/index.html')
})
INDEX.HTML INDEX.HTML
I can't load assets with ./
path, even though they're in the same folder 我无法使用./
路径加载资源,即使它们位于同一文件夹中
// WORKS
<link rel="stylesheet" href="./viewer/style.css">
// NOT WORKING
<script src="./game.js"></script>
TEST.HTML 测试HTML
If you click a link in index.html
which leads to test.html
, the behaviour is suddenly reversed! 如果单击index.html
中指向test.html
的链接,则该行为突然相反!
// NOT WORKING
<link rel="stylesheet" href="./viewer/style.css">
// WORKS
<script src="./game.js"></script>
How can I get links to assets working normally across all pages in a node site? 如何获得指向节点站点中所有页面上正常工作的资产的链接?
try using the exact path 尝试使用确切的路径
<script src="/viewer/game.js"></script>
<link rel="stylesheet" href="/viewer/style.css">
You can check if your file is working in the browser 您可以检查文件是否在浏览器中正常工作
like opening 像开
http://localhost/viewer/style.css http://localhost/viewer/style.css
http://localhost/viewer/game.css http://localhost/viewer/game.css
If you don't want to use the exact path then you have to set the correct path, as test.html
is inside viewer
folder 如果您不想使用确切的路径,则必须设置正确的路径,因为test.html
位于viewer
文件夹中
so in test.html you need to add 所以在test.html中,您需要添加
<script src="./game.js"></script>
<link rel="stylesheet" href="./style.css">
In routing, you are accessing index.html
in browser http://localhost/viewer 在路由中,您正在浏览器http:// localhost / viewer中访问index.html
。
then the correct path of the sources would be as follows 那么正确的来源路径如下
<link rel="stylesheet" href="./viewer/style.css">
<script src="./viewer/game.js"></script>
as the route changes the directory to /
. 当路由将目录更改为/
。
if you are accessing index.html
as http://localhost/viewer/index.html the correct path would be 如果您以http://localhost/viewer/index.html访问index.html
,则正确的路径为
<link rel="stylesheet" href="./style.css">
<script src="./game.js"></script>
In your case, you are confusing the router by using : 在您的情况下,您将使用以下命令混淆路由器:
app.get('/viewer', function (req, res) {
res.sendFile(__dirname + '/viewer/index.html')
});
There is a file called index.html
, when you enter a directory most server looks for index.html
inside that directory. 有一个名为index.html
的文件,当您输入目录时,大多数服务器会在该目录中查找index.html
。 If available it just shows the index.html
file. 如果可用,它将仅显示index.html
文件。
You should not add route if a directory exists in a static folder. 如果静态文件夹中存在目录,则不应添加路由。
PS: It is best practice to use the exact path of the source. PS:最佳做法是使用源的确切路径。
Hope this helps 希望这可以帮助
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.