I always forget it soberly & it took me a while to get to the correct information, so I'd like to keep it as a memorandum so that I don't forget it!
Just place the image file under app / assets / images and write as follows.
custom.scss
.background {
background-image: image-url('haikei_image.jpg');
}
I like this one because it's intuitive.
In the same way, place the image file under app / assets / images and write as follows. The difference from ① is that the file name is custom.scss.erb and the extension is .erb.
erb:custom.scss.erb
.background {
background-image: url("<%= asset_path('haikei_image.jpg') %>");
}
I used this at first because it worked well here, but soon I ended up looking for another method. In this case, of course, it will be recognized by the editor as an erb file, so the completion function will be lost when writing CSS. I thought it was quite annoying w If you have any countermeasures, I would appreciate it if you could comment!
Place images in public / images and
background-image: url('/images/haikei_image.jpg');
There seems to be a way to write, but this was not reflected well and it took a long time. I get a reload error on the console. ..
I output what I learned every day like this! We look forward to helping you even a little. If you have any suggestions or impressions, I would appreciate it if you could comment!
Recommended Posts