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. ↓ readme-1.jpg

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! !!

Recommended Posts

Display the background image in the production environment
JavaFX-Load Image in the background
Image is not displayed in production environment
[Rails] Reset the database in the production environment
[Rails] About the error that the image is not displayed in the production environment
[Error] The app is not displayed in the production environment
[Rails] How to display an image in the view
Error in production environment (The asset "~" is not present in the asset pipeline.)
[Rails] How to reset the database in production environment (Capistrano version)
Display text on top of the image
How to reflect seeds.rb in production environment
Display an image on the base64 screen
Creating a Servlet in the Liberty environment
Rails6: Extract the image in Action Text
[Swift] How to set an image in the background without using UIImageView.
rails tutorial About account activation in production environment
(Capistrano) After deploying, I get a We're sorry… error in the production environment.
Rails5.1 + puma SSL connection in local production environment
500 Internal Server Error occurs in Rails production environment
JavaFX8 image display
Display "Hello World" in the browser using Java
Put the image obtained from http in NotificationCompat
[Rails] How to delete production environment MySQL data after putting it in the development environment
How to set the display time to Japan time in Rails
Display a loading image in JavaFX and then display another image
Display the list in setDetails on the screen with spring-security
Background image transparency (layering the image with your favorite color)
[Rails 6] How to set a background image in Rails [CSS]
SSL in the local environment of Docker / Rails / puma
Display PlantUML in MkDocs
[Rails] What to do if you accidentally install bundle in the production environment in your local environment
Production environment and credentials.yml.enc
Launch the Rails app locally in production mode (API Server)
Let's make a calculator application in Java ~ Display the application window
Install by specifying the version of Django in the Docker environment
[Ruby on Rails] Quickly display the page title in the browser
Java sets the background color and background image for PowerPoint documents
[Rails] How to display information stored in the database in view