실현하고 싶은 것

머리글과 바닥글 배경에 이미지를 삽입하고 싶습니다.
이런 느낌↓

개발 환경

OS: macOS Big Sur 11.2.2

Ruby: 2.6.5

Ruby on Rails: 6.0.0

Sass: 3.7.4

텍스트 편집기: Visual Studio Code

손잡이

머리글/바닥글 CSS 선택기로

app/assets/stylesheets/style.css

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

라고 지정해, 「checks.jpg」를 app/assets/images의 아래에 저장.
하지만 ... 페이지를로드하면 404 Not Found 오류로.

시도에 다른 이미지 파일로 바꿔 보았지만 변화 없음.
"checks.jpg"를 app/assets/stylesheets 아래에 (css 파일과 같은 곳에) 두어 보면 올바르게 표시된다.

패스가 잘못되어 있는지 생각해 VScode에서 참조해 확인해 보지만 옳다. 그러나 404 에러를 추적해 보면 전혀 다른 곳을 참조해 가고 있는 모양.
조금 전에 실수로 app/assets하하의 파일 구성을 괴롭혀 버린 것이 나쁨을 하고 있는 것인가・・・결국 원인은 모르겠다.

해결 방법

SCSS의 image-url로 대체되었습니다.

학습중의 커리큘럼안에 어쩌면 「image-url」이라고 하는 기술이 있었으므로 조사해 보았다.
Saas라는 CSS를 확장하고 다루기 쉽게 한 것이 image-url을 비롯한 다양한 도우미를 이용할 수 있다.

이용한 rails의 버젼에서는 Saas가 프리셋 되고 있었으므로 조속히 CSS 파일로부터 SCSS 파일에 확장자를 변경해(Saas 중에서도 보다 CSS에 가까운 쓸 수 있는 SCSS를 선택), 이하와 같이 코드를 변경.

app/assets/stylesheets/style.scss

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

그러면 문제없이 이미지를 읽을 수있었습니다.
지정하고 있는 장소로서는 같기 때문에 신기하지만, 방법은 하나가 아니라는 것으로 공부가 되었다.

Saas의 해설은 이쪽을 참고로 했습니다