有没有办法使用 Rails Active Storage 在 CSS 中设置背景图像？

【问题标题】：Is there a way to set a background image within the CSS with Rails Active Storage?有没有办法使用 Rails Active Storage 在 CSS 中设置背景图像？
【发布时间】：2021-01-20 19:59:34
【问题描述】：

我知道可以使用style 属性在html.erb 中设置背景图像，如下所示：

<div style="background-image: url('<%= rails_blob_url(object.image) %>');">
    ...
</div>

但是是否可以在 CSS 中调用图像 blob 并将其用作 div 上的类？当有一个专门的 CSS 文件时，有一个 style 属性似乎是没有组织的。

【问题讨论】：

标签： ruby-on-rails rails-activestorage

【解决方案1】：

在 style.css 文件中实现 ActiveStorage URL 的一种方法是将文件扩展名更改为 style.css.erb 并像这样调用 helper

background-image: url("<%= Rails.application.routes.url_helpers.url_for(object.image) %>")

我用过类似的助手

Rails.application.routes.url_helpers.url_for

因为视图助手将不再可用。

但我认为它应该只适用于 sprocket 而不是 webpack，因为 ERB 插值只适用于 Sprockets。 Webpacker 不通过 ERB 传递资产。

注意：我们不应该像这样使用 ActiveStorage URL，因为资产编译是在生产部署时完成的，而不是针对每个请求，因此数据会变得陈旧，而 ActiveStorage 是用于 CRUD。

【讨论】：