Display the background image in the production environment

Preface

The reason why I decided to write such an article in the first place is that I am creating a portfolio using rails, but the image was not displayed well. After repeated trial and error, I was able to display it locally, but when I couldn't display it in production, I was confused.

The part I tried is my trial and error, so if you are not interested please jump to the conclusion lol

Premise

rails6.0.0 ruby2.6.5

Folder hierarchy assets 　images→karaokeray.jpg 　stylesheets→songs→index.css

What I tried 1

The reason why the image is not displayed is often the path, so I doubted it first.

Check the description of index.css.

index.css

background-image: url("../../images/karaokeray.jpg ");

Even if you check it, the path is this. This is actually a pitfall. This description is correct for normal static HTML, but Rails does not display the contents of assets as it is, but it displays well because it mainly uses a little help to improve the display speed of Web pages. It seems that it will not be done. In short, it seems that it cannot be implemented in this way because assets are involved.

Therefore

index.css

background-image: image-url("karaokeray.jpg ");

I will change it to. I thought it would be displayed with this, but it was not displayed here either. .. ..

What I tried 2

Although I was shocked, I found a new article when I was investigating whether there was any other way to implement it. It is a method to set and display images under public/assets/images. That's why I will put images in a new assets folder under public (this assets will be newly created different from the previous assets). In other words, change the file that contains the image. And

index.css

background-image: url('/assets/images/karaokeray.jpg');

It is displayed when you check it locally! !! When I triumphantly deployed it to production that it was finally resolved, it did not appear at all. .. A gentle person told me that I was holding my head how I could display it.

Conclusion

Change the css file to scss. Only this. It can be implemented by changing the file name from index.css to index.scss. (Return the image file to stage 1 of the first attempt.)

index.scss

background-image: image-url("karaokeray.jpg ");

Now that I can display it locally without any problems, I will check it in production. Then, it was displayed firmly! !! !! !!

↓ I was able to do something like this. ↓

At the end

I haven't really understood why I can implement it with this, so I'll study a little more. The asset pipeline seems to be deep. I thought it was just an HTML and CSS issue, so I struggled harder than I imagined. I will do my best to change jobs from inexperienced people! !!