What to do when the image is displayed firmly in the local environment, but the image disappears when deployed in the production environment.
・ Rails 6.0.3. ・ Haml
As shown in the notation below, the image was specified as a path using the Rails helper method ʻimage_tag`, and it was displayed well in the local environment.
= image_tag "assets/material/icon/icon.png "
However, when I deployed it, the image disappeared. (Although this notation is also suspicious)
Of course, the background-image described in the scss file was also not listed (this correspondence is described below).
In a production environment, the images will also be compiled, the image filenames will change, and the directories will change!
The difference between the production environment and the local environment is The path changes (app / assets / images / icon.png => /assets/icon.png) The name changes (icon.png => icon-xxx… .png) * xxx… is digest This will change!
Use the Rails option called ʻassets_path ()`.
This is convenient and can be deployed to the production environment, and even if the file name or directory changes, it can be handled locally and in production with this one!
Specifically, modify as follows
= image_tag asset_path("assets/material/icon/icon.png ")
I think this will work ... It is no longer displayed even in the local environment. .. .. ..
The result is the same even if you deploy with a bad source (naturally)
The option ʻasset_path corresponds to the files directly under ʻapp / assets / images, but apparently it does not correspond to the files in the directory beyond.
All the images managed in the directory have been moved directly under ʻapp / assets / images`, and the notation has been corrected as follows.
= image_tag asset_path("icon.png ")
After deploying with this, the image is finally displayed! !!
In summary, the solution was to use the option ʻasset_path and place the image files directly under ʻimages.
Again, just specifying the image file path as shown below didn't work.
background-image: url("main-image.jpg ");
With ʻimage-url`, it works both locally and in production.
background-image:image-url("main-image.jpg ");
You can handle it by writing it like this. Of course, specify the image directly under ʻapp / assets / images`
It is important to note here that there is no space after the : (colon). The description of SCSS was addictive because it was written with a half-width space after the colon.
So I couldn't find the cause without knowing that it was wrong.
Now when I deploy it, the image is displayed normally! !!
Recommended Posts