ruby-on-rails - 使 CSS 中的 base64 url​​ 在 Rails 中工作

Question

我正在尝试从 VideoJS 自定义 css。您可以在此处查看默认 css：http: //designer.videojs.com/

请注意，这个 css 使用 base64 url​​ 来处理像这样的图像

background: #66a8cc url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAP0lEQVQIHWWMAQoAIAgDR/QJ/Ub//04+w7ZICBwcOg5FZi5iBB82AGzixEglJrd4TVK5XUJpskSTEvpdFzX9AB2pGziSQcvAAAAAAElFTkSuQmCC) -50% 0 repeat;

当我将这个 CSS 复制并粘贴到我的 rails 项目中并在我的本地机器上启动它时，一切都很好，除了我看到的是正方形而不是这些图像。我认为这是因为 rails 默认情况下不知道如何处理这种格式。

我怎样才能理解上面的行？

Answer 1

可能是那里的 url 没有像 Rails 需要的那样编​​码。执行此操作的典型方法是使用asset_data_uriRails 中的帮助程序（如果您.erb对文件使用预处理器）或使用asset-data-urlsprockets 中的帮助程序。

来自 sprockets的asset-data-url($relative-asset-path)助手：返回对指定路径中 Base64 编码资产的 url 引用。例如：asset-data-url("rails.png")变成url(data:image/png;base64,iVBORw0K...)看这里：https ://github.com/rails/sass-rails

如果您可以使用这种方法并指向真实资产，那么 Rails 可能会更好地获得正确的 base64 编码资产。