../ 对于父目录不工作 HTML

Question

全部，

我做了一些研究，但没有找到这个问题的确切线索或解决方案。

我在这个 webapp 中使用 express，Chrome 版本 60.0.3112.113，Win 10 版本 1703。

我目前正在开发一个网站，我想在其中使用汉堡包 svg 进行移动导航。这就是 html 代表 "topbar"

的方式

<div id="topbar">
   <img src="../images/hamburger.svg" alt="ham">
</div>

这是文件结构：

https://puu.sh/xxDih/c842297b54.png

根据结构，我应该只需要做../images/hamburger.svg，但是当我这样做的时候，它在瀑布中出现了 404 错误。我多次运行解决这个问题，对父目录进行任何类型的 HTML 采购，但在 JS 文件中它工作正常。

我不太确定是什么问题。

Answer 1

我意识到这是 express 本身的问题。

如果（在这种情况下）您的 index.html 为 express.static('./pages')，则它看不到页面上方的任何内容并将页面视为工作目录。

我，来自 React（这是我什至在基本 JS 之前学习的第一个愚蠢的东西），想要将所有页面放在一个文件夹中，我认为这很有意义。

我所做的解决方法（可能不是最佳的）是将 index.html 作为 pages、css 和 images 的同级放在 src 文件夹。然后在 index.html 中，它有一个元标记如下： <meta http-equiv="refresh" content="0; url=./pages/home.html" /> 重定向到 home.html 页面。

同样，这可能不是最佳选择，但对于像我这样有点强迫症的人来说这是有道理的。

更新：

我们最终做的是让 index.html 成为静态页面，然后将各个页面加载到 iframe 中。这个网站主要是信息，没有数据库（还），所以不会有太多的处理。这是有效的新文件结构。

http://puu.sh/xy5Dw/4dbc72ec06.png

src 现在是我们的工作目录 (express.static('./src'))，所有内容都在其中进行了详细说明。

一旦我们包含一个数据库，它在服务器中最多只有 10 个值，并且将使用非常基本的请求，没有什么疯狂的。

Answer 2

对于express服务器，express处理的每个uri包含资源url和请求url。

请求 url(api) 是指您的快递 api 配置
resource(image, js, css, html...) 是相对于静态服务器根目录的，它是使用 express.static(root_path).

这就是我想说的。

Answer 3

我注意到images文件夹、node_modules文件夹和pages文件夹都在同一个目录下，css在pages文件夹下。

"../images/hamburger.svg" 是 pages 文件夹的正确相对路径，但作为（大红旗）node_modules 位于 "../node_modules /" 我认为服务器是从服务器根目录 /pages/ 文件夹提供服务的。这意味着 /pages/ 文件夹之上的任何内容都不会被共享。

显然您不想共享 ../../../windows/system32/ 或用户文档等。为了防止共享那些您可以从 html 访问的最高目录通过浏览器的页面是正在使用的服务器文件夹。我在想 /pages/home.html 是 localhost/home.html 而 localhost/css/ 是你的 css 目录。

服务器上的程序运行可以访问服务目录以上的文件，但浏览器不能。 “/node_modules/”应该在服务器根目录之外。

../ 对于父目录不工作 HTML

../ For Parent Directory Not Working HTML

html

svg

src