有没有办法在 CSS 和 Rails Active Storage 中设置背景图片？

Question

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

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

但是是否可以在 CSS 中调用图像 blob 并将其用作 div 中的 class？当有专用的 CSS 文件时，具有样式属性确实显得杂乱无章。

Answer 1

在 style.css 文件中实现 ActiveStorage URLs 的一种方法是将文件扩展名更改为 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。

Is there a way to set a background image within the CSS with Rails Active Storage?