ERB 文件在尝试查找本地保存的背景图像时引发 404

Question

我正在尝试更改我的 play.erb 页面的背景，但我很难显示图像（保存在本地）。该页面在使用在线提供的占位符图像时有效。我收到的错误消息是这样的。

127.0.0.1 - - [06/Mar/2018:21:55:49 +0000] "GET /images/map.jpg HTTP/1.1" 404 515 0.0137

据我了解，404 反映了无法找到图片的事实。

我查看了其他 SO 响应并尝试将 jpg 移动到同一目录，添加和删除引号以及添加 'public' 和 'image' 目录，但都无济于事。

谁能看出我错在哪里？我在下面添加了代码和我的目录结构。

谢谢你的时间。

#play.erb

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">

<style>
body, html {
height: 100%;
margin: 0;
}

.bg {
/* The image used */
background-image: url("/public/images/map.jpg");

/* Full height */
height: 100%;

/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
</style> 

</head>
<body>
<div class="bg"></div>
</body>
</html>

文件结构

lib(目录)
my_app.rb，浏览量（目录）

浏览量（目录）
index.erb, play.erb, public(目录)

public(目录)
图片（目录）

图片（目录）
map.jpg

Answer 1

根据 http://sinatrarb.com/intro.html，我的文件结构和代码存在两个关键问题。

1.) 静态文件从 ./public 目录提供。

我将文件结构调整为：

根目录
库 (目录), public(目录)

lib(目录)
my_app.rb，浏览量（目录）

浏览量（目录）
index.erb, play.erb, public(目录)

Public(dir) 仍然保存图像(dir) 和图像(dir) 仍然保存map.jpg.

2.) 请注意 public 目录名称不包含在 URL.

我也将URL调整为：

background-image: url("/images/map.jpg");

这解决了问题。

Answer 2

编辑：抱歉，我没有看到你身上的 Sinatra 标签 post...我将保留此信息仅供参考，但很抱歉，我帮不了你...

仅适用于 rails：您代码上的问题是 asset-pipeline 在文件名后创建指纹以在您更新某些内容时通知浏览器，您无法访问 public 文件夹内的文件夹（您可以确认尝试访问浏览器上的路径：localhost/images/somenthing.*)，只有它的根... 您可以使用 AssetsHelper 为您完成这项工作！

<style>
  ...
  .bg {
  /* The image used */
  background-image: url(<%= image_path('map.jpg');
  ...
</style>

如果您尝试在 *.css 或 *.scss 文件上执行此操作，rails 会给您一个错误。这种情况的解决方案是：

*.css - *.scss
.bg {
  /* The image used */
  background-image: url(asset_path('map.jpg'));

希望这能回答您的问题:)

ERB 文件在尝试查找本地保存的背景图像时引发 404

ERB file raising 404 when trying to find locally held background image

html

css

ruby

background

sinatra