0

So, my next problem on a rails project is the following: I am using the asset pipeline to serve my assets. Now I want to include inline css into a view with a background image. because of the asset pipeline I am just able to use the helpers that rails offers from ground. But the problem is, that every helper (except image_tag is delivering the wrong output).

image_url('work-1.png')         # => /images/work-1.png
image_path('work-1.png')        # => /images/work-1.png
asset_url('work-1.png')         # => /work-1.png
asset_path('work-1.png')        # => /work-1.png
image_tag('work-1.png')         # => <img ..........> # Only right tag!

Yeah, that didn't help me. And also all other questions I found about this topic.

Would be nice to know what the issue is with this. Thanks!

Community
  • 1
  • 1
Nick Schmidt
  • 1,427
  • 1
  • 13
  • 22

2 Answers2

2

The image_tag helper is the only method out of your list that will actually produce an html tag.

The image_url helper actually use the image_path helper to compute the full path to an image (eg. http://www.example.com/image/image.png)

The image_path helper produces the relative path to an image (eg. /images/foo.png)

image_tag output

image_tag("icon") # => <img alt="Icon" src="/assets/icon" />
image_tag("icon.png") # => <img alt="Icon" src="/assets/icon.png" />
image_tag("icon.png", size: "16x10", alt: "Edit Entry") # => <img src="/assets/icon.png" width="16" height="10" alt="Edit Entry" />
image_tag("/icons/icon.gif", size: "16") # => <img src="/icons/icon.gif" width="16" height="16" alt="Icon" />
image_tag("/icons/icon.gif", height: '32', width: '32') # => <img alt="Icon" height="32" src="/icons/icon.gif" width="32" />
image_tag("/icons/icon.gif", class: "menu_icon") # => <img alt="Icon" class="menu_icon" src="/icons/icon.gif" />

image_path output

image_path("edit")                                         # => "/images/edit"
image_path("edit.png")                                     # => "/images/edit.png"
image_path("icons/edit.png")                               # => "/images/icons/edit.png"
image_path("/icons/edit.png")                              # => "/icons/edit.png"
image_path("http://www.example.com/img/edit.png")          # => "http://www.example.com/img/edit.png"
ptierno
  • 9,534
  • 2
  • 23
  • 35
  • Thanks for this, but I knew this before. My question is, why the image_path is just printing out the wrong path? I am going to use it in a `background-image` style attribute, so I need no HTML, just the right path, that isn't offered by `image_path` – Nick Schmidt Dec 24 '14 at 12:11
  • Sorry for the misunderstanding. I'll look into that. – ptierno Dec 24 '14 at 12:55
  • I found the mistake I made and added an answer myself. Thanks, though! – Nick Schmidt Dec 24 '14 at 13:08
2

Another question answered myself.

I had the wrong path in the image_path helper. So, if you have a missing image (that cannot be found by the asset pipeline, the helper is falling back to the /images path.

Let's imaging I want to include a path of ph/image-1.png into my document. image_path('ph/image-1.png') will put the right directory with the path. Otherwise, if you are going to use image_path('image-1.png') it will use the /images directory in front of the image you are going to use. But this cannot be found. This was my fault.

To wrap it up, here is the summary:

image_path('ph/image-1.png')              # => /assets/ph/image-1.png
image_path('image-1.png')                 # => /images/image-1.png
Nick Schmidt
  • 1,427
  • 1
  • 13
  • 22