Question

在我的应用程序中，用户上传图像，然后我将其放在S3上。然后使用以下样式

将该图像用作div的背景

div#id { background: url('<%= creative.url %>') no-repeat;}

广告素材网址如下：

http://myhost.s3-website-us-east-1.amazonaws.com/27/display/608-(rec'd_021014)_user_image.jpg?1392767029

如上所述，问题是creative.url可以包含特殊字符（引号，parens等），并且根据http://www.w3.org/TR/CSS2/syndata.html#value-def-uri，它需要被转义。

我希望有一些方便的ruby / rails功能可以解决这个问题。

如果没有，那么我可能需要做一些正则表达式替换 - 那会是什么样的？

更新

人们建议使用URI编码函数 - 我确实试过了，但url字符串直接在ERB模板中使用，所以它会编码整个东西，这在css url函数中不起作用 - 即，我会像（从上面）的东西：

div#id {background: url('http%3A%2F%2Fmyhost.s3-website-us-east-1.amazonaws.com%2F27%2Fdisplay%2F608-(rec%27d_021014)_user_image.jpg%3F1392767029') no-repeat;}

Answer 1

您可以尝试：

URI(url) 要么 URI.encode(url) 要么 URI.decode(url) 要么 URI.parse(url)

取决于案件

您可能需要在

之前加载require 'uri'

Answer 2

推荐的方法是使用ERB::Util

中的url_encode

在Rails中，url_encode有alias u。

div#id { background: url('<%=u creative.url %>') no-repeat;}

Answer 3

您可以使用转储。

div#id { background: url('<%= creative.url.dump %>') no-repeat;}

Answer 4

我不认为Rails有任何CSS转义帮助器，但the JS escaping helper j会比没有更好，因为它会转义引号，关闭括号和反斜杠。但是，可能会有一些特殊的CSS字符无法触及。

您可以在相关元素上设置data-属性，然后使用the CSS attr function来引用它。这样你就可以在CSS中使用它而不必担心它为CSS转义它。

Answer 5

我尝试了一个名为jeux'); background-image: url('nope.jpg的文件。

唯一起作用的是：

  def escape_css(string)
    string.gsub("'", "\\\\'")
  end

（我尝试过CGI.escape，URI.escape，u和String#dump）

完整代码：

  .h-32.bg-cover.bg-no-repeat.bg-center(style="background-image: url('#{escape_css category_image_url(category)}')")

Ruby / Rails - 转义uri用于css

5 个答案: