Active Storage：带有特殊字符的文件名答案

【问题标题】：Active Storage: filenames with special charactersActive Storage：带有特殊字符的文件名
【发布时间】：2021-07-09 11:48:30
【问题描述】：

在我的应用程序中，用户可以更改横幅的背景图像。他们使用 Simple Form 和 Active Storage 上传文件。它工作正常，但我们有一个用户试图上传文件名banner-website.png (2).png。该文件已上传并保存，但不显示为背景图像。我猜这是因为文件名中的特殊字符造成的。

有什么建议可以避免这种情况？我们需要清理文件名吗？

【问题讨论】：

您使用什么代码将图像置于背景中？生成的 HTML 和 CSS 是什么样的？
我用来显示图像的代码是style="background-image: url(<%= rails_blob_url(@theme.background_image);" %>)。
在 HTML 中，它看起来像这样：<div class="card border-top-0 border-left-0 border-right-0 border-bottom rounded-0 mb-2" style="background-image: url(http-marble2-lvh-me-3000-rails-active_storage-blobs-redirect-eyjfcmfpbhmionsibwvzc2fnzsi6ikjbahbidz09iiwizxhwijpudwxslcjwdxiioijibg9ix2lkin19-56310f5c9cba27c1d79e1cfa079c6c669baca78b-banner-website-png-20-2-png);。在 CSS 中，它与背景图像显示相同的 URL。
看起来它正在清理或参数化所有 URL，对吧？ (http-marble2-...) 但是我没有添加任何方法来做到这一点...我看到在我的 Gemfile.lock 我有`rails-html-sanitizer (1.3.0)`。我不知道它是否改变了什么。

标签： ruby-on-rails ruby rails-activestorage

【解决方案1】：

需要检查的几件事：

检查控制台并尝试查看 CSS 并查看完整链接正在填充？尝试检查 CSS 代码并将链接复制到一个地址栏，以查看图像是否从该方向加载。
检查用户 png 文件以确保它没有损坏。损坏的 PNG 标头可能会导致网站出现问题。
检查您的清理插件是否导致该文件出现问题。我从来没有用过那个，所以我不能说。

我尝试将具有相同名称的文件上传到我的 Rails 6 测试台（带有活动存储和刺激 js 的香草），它工作正常。也可能是有冲突的 CSS 代码。

只要我的 2 美分。

【讨论】：

【解决方案2】：

我在这里找到了解决方案：Rails Active Storage - Background Image invalid property?

在 URL 周围添加单引号解决了它。

【讨论】：