在 CSS 中调用 rails 路由（在 haml 中）答案

【问题标题】：Call a rails route into CSS (in haml)在 CSS 中调用 rails 路由（在 haml 中）
【发布时间】：2015-03-03 08:34:28
【问题描述】：

= @photo.image.url (in haml) 将根据视图编译图像的 url

我想使用下面 CSS 中的标签生成的图片链接——但这不起作用。

#BG {
  background: url( HERE!!! ) no-repeat center center fixed;
  -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height: 400px;
}

我已经尝试直接在页面上使用 javascript 将硬连线图像替换为新图像以进行测试……但这没有用。我玩过下面的代码并尝试了很多不同的版本。

:javascript
  document.getElementById('BG').style.background = "url('newimg.jpg') no-repeat center center fixed"

这里是使用它的 Haml 代码：

 #BG
  This div should have the image as a background
  %p= @photo.title
.container
  .jumbotron

我需要一个解决方案来将图像 url 放入后台 url

【问题讨论】：

如果你使用 rails 4 background-image: image-url("newimg.jpg") 可以试试这个，它应该会在你的 assets/images/ 文件夹中找到 newimg
@Sontya，我的问题可能令人困惑：newimg.jpg 是我用来测试我使用的 Javascript 示例的无关图像
无论你的图像文件的名称是什么，这有什么关系
您尝试过#BG 的内联样式吗？像这样#BG{style: "background: url(#{@photo.image.url}) no-repeat"}
照片全部存入数据库。 css 需要是动态的，通常由以下方式调用：= @photo.image.url

标签： javascript css ruby-on-rails haml

【解决方案1】：

插入值@photo.image.url并将其添加到字符串中

渲染标签时在 HAML 中

#BG{style: "background: url(#{@photo.image.url}) no-repeat"}

或

CSS

#BG {background: url("#{@photo.image.url}")}

【讨论】：