如何添加背景图像内联样式链接标记Rails

时间:2016-06-01 07:08:36

标签: css ruby-on-rails

我似乎无法做到这一点。

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

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

我的app/assets/images目录中有一个名为avatar.png的图像,就像测试一样。它现在是一个空的标签,但是一旦我整理了应用程序的个人资料部分,它就会成为link_to

我收到以下错误:

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

我该如何设置?我正在使用Rails 5 rc1和Ruby 2.3和bootstrap。

注意:

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

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

修改

以下是更好的错误:

errors from the gem

完整堆栈跟踪如下所示:

    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:

1 个答案:

答案 0 :(得分:6)

您可以这样做:

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

详细了解image_path