css - 如何添加背景图像内联样式以链接标签 Rails

Question

我似乎无法正确理解这一点。

在我的 Rails 应用程序中，我使用的是 ActionCable，它在发送部分 URL 时存在问题。为了解决这个问题，我将让 CSS 完成设置图像的工作，只允许动态设置图像我将需要访问 View ，因此这必须是内联 css。

.message
  %a.message_profile-pic{ :href => "", {:style=>"background-image:url('avatar.png')" } }

我的 app/assets/images 目录中有一个名为 avatar.png 的图像作为测试。它现在是一个空的 a-tag，但一旦我整理出应用程序的配置文件部分，它就会变成一个 link_to。

我收到以下错误:

SyntaxError - syntax error, unexpected ')', expecting =>
...nd-image:url('avatar.png')" } )}></a>\n  #{

如何设置？我正在使用带有 Bootstrap 的 Rails 5 rc1 和 Ruby 2.3。

注意:

我也尝试了新的 HAML 语法，结果相同:

%a.message_profile-pic{ :href => "", style: {background-image: "url('avatar.png')"}}

编辑

这是向我展示的更好的错误:

完整的堆栈跟踪如下所示:

    SyntaxError - syntax error, unexpected ')', expecting =>
    ...nd-image:url('avatar.png')" } )}></a>\n  #{
    ...                               ^
    /Users/ruberto/Personal/Projects/splat/app/views/messages/_message.html.haml:6: unknown regexp option - a
    /Users/ruberto/Personal/Projects/splat/app/views/messages/_message.html.haml:6: syntax error, unexpected $undefined
    ));}\n  </a>\n  <span class='message_timestamp'>\n    #{
                 ^
    /Users/ruberto/Personal/Projects/splat/app/views/messages/_message.html.haml:6: syntax error, unexpected keyword_class, expecting keyword_do or '{' or '('
    ));}\n  </a>\n  <span class='message_timestamp'>\n    #{
                               ^
    /Users/ruberto/Personal/Projects/splat/app/views/messages/_message.html.haml:6: syntax error, unexpected $undefined
    ));}\n  </a>\n  <span class='message_timestamp'>\n    #{
                                                     ^
    /Users/ruberto/Personal/Projects/splat/app/views/messages/_message.html.haml:8: syntax error, unexpected '}', expecting tSTRING_DEND
    ));}\n  </span>\n  <span class='m...
        ^
    /Users/ruberto/Personal/Projects/splat/app/views/messages/_message.html.haml:8: unknown regexp options - pa
    /Users/ruberto/Personal/Projects/splat/app/views/messages/_message.html.haml:8: syntax error, unexpected $undefined
    ...n class='message_star'></span>\n  <span class='message_conte...
    ...                               ^
    /Users/ruberto/Personal/Projects/splat/app/views/messages/_message.html.haml:8: syntax error, unexpected keyword_class, expecting keyword_do or '{' or '('
    ...ge_star'></span>\n  <span class='message_content'>\n    #{
    ...                               ^
    /Users/ruberto/Personal/Projects/splat/app/views/messages/_message.html.haml:8: syntax error, unexpected $undefined
    ...<span class='message_content'>\n    #{
    ...                               ^
    /Users/ruberto/Personal/Projects/splat/app/views/messages/_message.html.haml:11: syntax error, unexpected '}', expecting tSTRING_DEND
    ));}\n  </span>\n</div>\n", -2, f...
        ^
    /Users/ruberto/Personal/Projects/splat/app/views/messages/_message.html.haml:11: unknown regexp options - dv
    /Users/ruberto/Personal/Projects/splat/app/views/messages/_message.html.haml:11: syntax error, unexpected $undefined
    ));}\n  </span>\n</div>\n", -2, false);::Haml::Util.h...
                            ^
    /Users/ruberto/Personal/Projects/splat/app/views/messages/_message.html.haml:11: unterminated string meets end of file
    /Users/ruberto/Personal/Projects/splat/app/views/messages/_message.html.haml:11: syntax error, unexpected end-of-input, expecting tSTRING_DEND:

Answer 1

你可以这样做:

:style => "background-image: url(#{image_path "avatar.png"})"

找到更多关于 image_path 的信息.