Question

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

视图/ 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>

应用程序/资产/样式表/ 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

无法使用css

1 个答案: