无法使用 css 加载背景图像

Question

这是一个令人沮丧的..我试图通过 CSS 显示 3 个图像并且只能让 1 个工作（这让我很困惑 b/c 我对所有 3 个使用相同的方法.. )。我也在使用 Rails，它可能会或可能不会产生某种路由差异。这是我得到的：

views/audioplayer/show.html.erb：

footer_lodyas.png 不起作用..

<style type="text/css">
  html, body { margin: 0; padding: 0; }
  body { padding: 260px; background: #f2f2f2 url(footer_lodyas.png) no-repeat top center; }
  .audio-player { margin: 0 auto;}
</style>

app/assets/stylesheets/audioplayer.css.scss：

play-pause.png 有效工作

mute-unmute.png 不起作用工作

.mejs-controls .mejs-play button,
.mejs-controls .mejs-pause button {
  width: 21px;
  height: 21px;
  top: 35px;
  left: 135px;
  background: transparent url(play-pause.png) 0 0;
}

.mejs-controls .mejs-mute button,
.mejs-controls .mejs-unmute button {
  width: 14px;
  height: 12px;
  top: 70px;
  left: 140px;
  background: transparent url(mute-umute.png) 0 0;
}

所有这些图像都位于app/assets/images/ 目录中。服务器日志给了我以下错误：

ActionController::RoutingError (No route matches [GET] "/footer_lodyas.png"):

和

ActionController::RoutingError (No route matches [GET] "/assets/mute-umute.png"):

如果我的 play-pause.png 图像渲染正常，为什么会发生这种情况？提前致谢。

Answer 1

资产网址

您需要使用asset-url:

background: transparent asset-url("mute-umute.png") 0 0;

原因是每当您在管道中使用资产时，Rails 都希望在某个时候预编译它们。预编译过程fingerprints新资产（预编译的资产放入public/assets文件夹）。

在生产中，您希望将图像命名为 mute-umute-09239923492394923492349.png。

如果您对这些资产调用 url，它们根本不会加载。您必须使用 asset-url 助手将直接 URL（包括任何指纹文件名）拉到视图中。

---

play-pause.png 图像渲染良好

可能的原因是这个文件没有预编译，或者你把它放在 Rails 能够找到的某个地方。

在不了解您的服务器设置的情况下，我只能推测它。

---

SASS

最后，个人建议使用sass - 这是scss 的更好版本（您已经在使用）：

#app/assets/stylesheets/audioplayer.sass
.mejs-controls 
   .mejs-play button,
   .mejs-pause button 
     width: 21px
     height: 21px
     top: 35px
     left: 135px
     background: transparent asset-url("play-pause.png") 0 0

   .mejs-mute button,
   .mejs-unmute button 
     width: 14px
     height: 12px
     top: 70px
     left: 140px
     background: transparent asset-url("mute-umute.png") 0 0