开发者

RoR3 - image path error?

I have an image of a comment bubble showing on the index page inside an article p tag which shows how many comments have been added. RoR3 keeps throwing an error and it has me stumped!?

For some reason its looking in the path stylesheets/images/comment.png - when it should only be looking in /images/comment.png as per the Ruby code block. Any suggestions on where I have gone wrong?

_article.html.erb

<div class="article_header">
<b>Article Title: </b> <%= truncate(article.title, :length => 50) %> 

<div class="com-bub">
<img src="/images/comment.png"/>
</div>

<div class="com-cnt">
<%= article.comments.count %>
</div>

The css:

.com-bub {
float:right;
background: url('images/comment.png') no-repeat;
margin: -8px 16px 0px 0px;
}

Error:

SQL (0.2ms) SELECT COUNT(*) FROM "articles" WHERE (published = 't') Rendered layouts/_footer.html.erb (1.5ms) Rendered layouts/_usernav.html.erb (1.3ms) Rendered articles/index.html.erb within layouts/application (190.1ms) Completed 200 OK in 289ms (Views: 193.7ms | ActiveRecord: 3.6ms)

Started GET "/stylesheets/images/comment.png" for 127.0.0.1 at Fri May 27 13:44:43 +0100 2011

Started GET "/stylesheets/images/comment.png" for 127.0.0.1 at Fri May 27 13:44:43 +0100 2011

Started GET "/stylesheets/images/comment.png" for 127.0.0.1 at Fri May 27 13:开发者_StackOverflow44:43 +0100 2011

Started GET "/stylesheets/images/comment.png" for 127.0.0.1 at Fri May 27 13:44:43 +0100 2011

ActionController::RoutingError (No route matches "/stylesheets/images/comment.png"):

Rendered /opt/local/lib/ruby/gems/1.8/gems/actionpack-3.0.5/lib/action_dispatch/middleware/templates/rescues/routing_error.erb within rescues/layout (0.7ms)


your path is incorrect, it should be:

background: url(/images/comment.png) no-repeat;

You need the leading / just like in your markup, also you do not need ticks in your css.


Use a relative link:

background: url(../images/comment.png) no-repeat;

This will take into account scenarios where you deploy to a sub URI (e.g.: www.example.org/myapp/)

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜