html - 无法使用 css 加载背景图像

Question

这是一个令人沮丧的......我试图通过 CSS 显示 3 个图像，但只能让 1 个工作(这让我非常困惑，因为我对所有 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(没有路由匹配 [GET]“/footer_lodyas.png”):

和

ActionController::RoutingError(没有路由匹配 [GET]“/assets/mute-umute.png”):

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

Answer 1

Assets 网址

您需要使用asset-url :

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

原因是，每当您在管道中使用资源时，Rails 都会在某个时刻预编译它们。预编译过程fingerprints新资源(预编译资源放置在 public/assets 文件夹中)。

在生产中，您希望图像的名称类似于 mute-umute-09239923492394923492349.png。

如果您对这些资源调用 url，它们根本不会加载。您必须使用 asset-url 帮助程序将直接 URL(包括任何指纹文件名)拉至 View 。

---

play-pause.png image is rendering fine

出现这种情况的可能原因是该文件没有预编译，或者您已将它放在 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