Ruby on Rails 응용 프로그램에서 배경 이미지가 렌더링되지 않음

Question

head 클래스의 배경에서 이미지를 렌더링하려고합니다. 다음과 같이

내 application보기이 HAML 기록되고 몸이 정의 :

%body 
    .container 
     .head 
      .sixteen_columns 
      .top-nav 

내 application 스타일에 포함 된 것은 :

.head { 
    background-image: url(/images/background_image.jpg); 
    width: 100%; 
    height: auto; 
} 

나는 변화의 숫자를 시도했다 이미지의 경로를 지정하고 이미지 이름을 여러 번 변경했지만 아무런 소용이 없습니다.

무엇이 문제입니까?

Answer 1

당신은 레일 3.1을 사용하거나 이상있는 가정, 당신이 당신의 이미지를 적절하게 자산 파이프 라인을 사용하고 있는지, 당신은 수행하여 이미지 파일을 포함 할 수있는 사항은 다음과 같습니다

.head { 
    background-image: url(/assets/background_image.jpg); 
    width: 100%; 
    height: auto; 
} 

그 이유를 자산 파이프 라인이 작동하는 방식 때문입니다. 런타임에 자산을 컴파일하고 모든 자산을 /assets/ 폴더에 저장합니다. 또한 하위 폴더 구성을 무시하고 /assets/subfolder/이 아닌 모든 파일을 루트 /assets/ 폴더로 덤프합니다.

Answer 2

스타일 시트에서 이미지를 참조 할 때 asset_path 도우미를 사용하는 것이 좋습니다. 문서는 당신이 나열된 CSS는

.head { 
    background-image:url(<%= asset_path 'background_image.jpg'%>); 
    width:100%; 
    height:auto; 
} 

주를 당겨 것이다 맥락에서 (2.2.1 체크 아웃) here를 찾을 수있다 :이 스타일 시트는 ERB 있어야합니다. 그래서 명시 적 경로를 진술을 통해 많은 이점을 제공 하

, 새로운 버전의 출시와 레일 응용 프로그램 변경의 구조로, 당신은 하지는 해당 이미지를 위해 코드에서 아무것도 변경해야한다는 것을 하나 적절히 참조되어야한다.

이것은 이미지를 참조하기에는 과잉스러운 것처럼 보일 수 있지만, 사용하기는 어렵지만 Rails의 많은 규칙 중 하나입니다. 귀하의 응용 프로그램이 성장하고 변화함에 따라, 희망에 따라 더 나은 시간 시험을 수행 할 수있게됩니다.

Answer 3

는 당신이있어 레일의 버전을 확인하기 위해 콘솔에서

rails -v 

을 실행 해보십시오.

레일스 2.x 응용 프로그램을 실행하는 것처럼 들리는가요? 즉,/public 디렉토리에서 이미지, js 등을 제공하고 있음을 의미합니다. CSS에서 백그라운드 이미지 설정을 방해 한 한 가지 중요한 점은 지정한 경로가 스타일 시트 (예 :/public/stylesheets)에있는 디렉토리와 관련이 있으며 프로젝트 자체의 루트 디렉토리가 아닌 것입니다.

경로를 변경하여 스타일 시트의 위치에서 한 디렉토리 위로 이동 해 보셨습니까?

.head { 
    background-image: url(../images/background_image.jpg); 
    width: 100%; 
    height: auto; 
} 

편집 : bg 이미지의 다른 경로를 시도한 적이 있습니까?

몇 가지 다른 가능성이있을 수 : 확인

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

한가지 뷰를로드하고 관리자 (Ctrl 키를 Shift + I)를 사용하여 Google 크롬에서 사업부를 검사하는 것입니다. div를 선택하고 Chrome에서 지정하는 스타일을 확인합니다. 또한

, 그것은 여전히 ​​이름이 있다고 이중 검사가 background_image.jpg는 내가 간과 일부 오타가 불에 왔 몇 번을 말할 수 없다)

Answer 4

해결책 :

그것은 밝혀졌다 두 가지가 결합 된 것입니다.

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

그러나, .head div이 0의 height로 renbdering했다 : 나는 배경 이미지 형식을 사용했다. 테스트 할 고정 된 높이를 추가했는데 모두 완벽하게 나타났습니다. 나는 여기서부터이 일을 할 수있다.

도움을 주셔서 대단히 감사합니다! 레일 4에서

Answer 5

당신은 이제 CSS와 말대꾸 헬퍼 이미지 URL을 사용할 수 있습니다

div.logo {background-image: image-url("logo.png");} 

당신의 배경 이미지는 당신이 당신의 CSS 파일에서이를 참조하는 방법을 찾고 고려 표시되지 않는 경우.