access images in stylesheets with webpacker and rails 6

rubyonrails-talk
1

How do I refer to images in stylesheets with rails 6/webpacker I always get can’t resolve image.png from code like this:

.search_button

.search_button { background:url(search.png); }

2

.search_button { background:url(image_path(“search.png”)); }

more information : The Asset Pipeline — Ruby on Rails Guides

3

Not

First, where should I put images Then, how to access them from app/javascripts/stylesheets/application.scss

4

in the file app/assets/config/manifest.js

//= link_tree …/images

//= link application.css

``

I have images in app/assets/images/

background-image: url(image_path(“bg/main.jpg”));

``

So this is similar to the way you would access images in previous versions of Rails, the linking of those assets is being handled by sprockets and not webpacker.

5

Webpacker is serving images in views, I just don't know how to do it in css

6

Webpacker provides an asset_pack_path method https://github.com/rails/webpacker#usage

I guess you’ll need to use a .css.erb file in order for that to work.

something.css.erb

.search_button {

background: url(‘<%= asset_pack_path(‘images/search.png’) %>’);

}

Lately you are asking A LOT of questions about webpacker for images and CSS, you don’t really HAVE to change from Sprockets to Webpacker to update to rails 6, in fact, if you start a new rails app, it uses webpacker only for javascript assets, it’s still using sprockets for css and images by default. Of course you are free to use webpacker for everything but maybe you have to follow webpack guidelines and start messing with loaders, check the webpack guide on packing images and using it for background image for example https://webpack.js.org/guides/asset-management/#loading-images

7

How do I refer to images in stylesheets with rails 6/webpacker I always get can’t resolve image.png from code like this:

.search_button

.search_button { background:url(search.png); }

8

Sorry I mis-spelled the file name It’s emitting now but not rendering I think my html is wrong

<%= submit_tag “Search”, class: submit_button %>

.search_button { background-image: url(‘…/images/search-button.png’); }

9

Yea I know but I already see people saying why use both Also I wanna get used to this This is the first technology I’m getting in on the ground floor I feel, the time to learn/get used to using webpacker is now Moving all assets to webpacker is good practice for me Also using webpack-dev-server is a step forward, as soon as you save a file it recompiles and you get rewarded for doing something right when you save the file and the screen lights up green like a pinball machine rewards you for scoring

10

I saw one post where someone suggests renaming javascripts to “webpacker” and then creating javascripts and images folders under “webpacker” Wanna get a good handle on being able to put assets wherever I want