background image in inline css style inside my html.erb view page is showing in development only but not production stage on heroku

Question

I'm creating a new rails project and trying to refactor front-end site template inside it, I got to edit the background image css inline styling inside my html.erb file to match the Ruby on Rails conventions, but the background image only shows on development stage, but not showing on production after pushing to heroku, any solutions ? ... knowing that I'm still newbie to ruby on rails and refactoring themes, and that I searched various threads on stackoverflow and nothing works for me

here's the code I use

<div class="main_slider" style="background-image:url(/assets/slider_1.jpg)">

the code is used inside my index.html.erb file, in this part of the code

<div class="main_slider" style="background-image:url(/assets/slider_1.jpg)">
    <div class="container fill_height">
        <div class="row align-items-center fill_height">
            <div class="col">
                <div class="main_slider_content">
                    <h6>Spring / Summer Collection 2017</h6>
                    <h1>Get up to 30% Off New Arrivals</h1>
                    <div class="red_button shop_now_button"><a href="#">shop now</a></div>
                </div>
            </div>
        </div>
    </div>
</div>

any solutions to make the background image appears in the production too ?, it's been a headache for me

Answer 1

You should use image_path or image_url instead of path to image on your directory, as images precompiled in production mode. Change to this:

<div style="background-image:url(<%= image_url('myimage.jpg') %>)"></div>