当我添加额外的寻址级别时，为什么 Sinatra 应用程序中没有显示图片？答案

【问题标题】：Why picture is not shown in Sinatra app when I add additional level of addressing?当我添加额外的寻址级别时，为什么 Sinatra 应用程序中没有显示图片？
【发布时间】：2015-07-28 08:53:11
【问题描述】：

我的 Sinatra 应用程序具有典型的文件层次结构：根包含：

文件“hc.rb” 文件“endpoints.yml” 目录“意见” 目录“公共”

“视图”包含 .erb 文件

公共目录包含：

文件“style.css” 目录“图像”

在目录图像中，我有 favicon 和 404 图片。

这里是部分代码：

not_found.erb

<center><img src="images/404.png" alt="404 Not Found"></center>

hc.rb

not_found do
  erb :not_found
end

layout.erb

<!doctype html>
<html lang="en">
<head>
 <title></title>
 <link rel="icon" href="images/favicon.ico"/>
 <meta charset="utf-8">
 <link rel="stylesheet" href="styles.css">
</head>
<body>
 <header>
 </header>
 <section>
    <%= yield %>
 </section>
</body>
</html>

当我输入 localhost:[port]/smthnonexisting

我在屏幕上看到 404 图像

但是当我输入附加级别时

localhost:[端口]/smthnonexisting/andsmthmore

我没有看到图像，我只看到 404 Not Found 和损坏的图像 ico。

可能是什么原因？

谢谢

【问题讨论】：

标签： html ruby sinatra

【解决方案1】：

原因是您使用的是相对于当前文件夹的路径。当您访问http://localhost/smthnonexisting 时，您的浏览器正在寻找/styles.css 的styles.css 文件。当您访问 http://localhost/smthnonexisting/andsmthmore 时，您的浏览器正在寻找位于 /smthnonexisting/styles.css 的 styles.css 文件。

这可以通过在styles.css 之前通过/ 保持您的引用相对于“根”文件夹来解决，如下所示：

<link rel="stylesheet" href="/styles.css">

您也应该对 favicon 和任何其他包含的文件执行相同的操作：

<link rel="icon" href="/images/favicon.ico" />

【讨论】：