[ruby-on-rails] Rails 4에서 CSS로 이미지를 참조하는 방법
Heroku의 Rails 4에는 이상한 문제가 있습니다. 이미지가 컴파일되면 해시가 추가되지만 CSS 내에서 해당 파일에 대한 참조는 올바른 이름이 조정되지 않습니다. 여기 내가 의미하는 바가 있습니다. logo.png라는 파일이 있습니다. 그러나 heroku에 표시되면 다음과 같이 표시됩니다.
/assets/logo-200a00a193ed5e297bb09ddd96afb953.png그러나 CSS는 여전히 다음과 같이 말합니다.
background-image:url("./logo.png");결과 : 이미지가 표시되지 않습니다. 아무도 이것에 부딪 치나요? 이 문제를 어떻게 해결할 수 있습니까?
답변
Sass와 함께 스프로킷 에는 작업을 수행하는 데 사용할 수 있는 멋진 도우미가 있습니다. 스타일 시트 파일 확장자가 또는 인 경우 스프로킷은 이러한 도우미 만 처리합니다 ..css.scss.css.sass
이미지 특정 도우미 :
background-image: image-url("logo.png")불가지론 적 도우미 :
background-image: asset-url("logo.png", image)
background-image: asset-url($asset, $asset-type)또는 css 파일에 이미지 데이터를 포함하려는 경우 :
background-image: asset-data-url("logo.png")답변
이유를 모르지만 내 이미지가 asset / images / 디렉토리 아래에 있어도 나에게 도움이 된 것은 image_path 대신 asset_path 를 사용 하는 것 입니다 .
예:
app/assets/images/mypic.png루비에서 :
asset_path('mypic.png').scss에서 :
url(asset-path('mypic.png'))최신 정보:
이 자산 헬퍼들이 sass-rails gem (내 프로젝트에 설치 한.
답변
레일 4, 당신은에있는 이미지를 참조 할 수 있습니다 assets/images/귀하의에서 .SCSS이 같은 파일을 쉽게 :
.some-div {
background-image: url(image-path('pretty-background-image.jpg'));
}개발 모드 ( localhost:3000) 에서 응용 프로그램을 시작하면 다음과 같은 내용이 표시됩니다.
background-image: url("/assets/pretty-background-image.jpg");생산 모드에서 자산에는 캐시 도우미 번호가 있습니다.
background-image: url("/assets/pretty-background-image-8b313354987c309e3cd76eabdb376c1e.jpg");답변
해시는 자산 파이프 라인 및 서버 최적화 캐싱 때문에
http://guides.rubyonrails.org/asset_pipeline.html) 때문입니다.
다음과 같이 해보십시오 :
background-image: url(image_path('check.png'));행운을 빕니다
답변
CSS에서
background: url("/assets/banner.jpg");원래 경로는 /assets/images/banner.jpg이지만 일반적으로 url 메소드에 / assets / 만 추가하면됩니다.
답변
.css.erb확장 기능을 사용할 때 이미지 를 참조하는 방법에 대한 답변은 없습니다 . 나를 위해 프로덕션 과 개발 .
자산 파이프 라인은 ERB를 자동으로 평가 합니다. 즉, CSS 자산에 erb 확장자를 추가하면 (예 🙂 CSS 규칙에서 application.css.erb다음과 같은 도우미 asset_path를 사용할 수 있습니다.
.class { background-image: url(<%= asset_path 'image.png' %>) }참조되는 특정 자산의 경로를 씁니다. 이 예에서는 다음과 같은 자산로드 경로 중 하나에 이미지가있는 것이 좋습니다.app/assets/images/image.png 참조 여기 참조)에 있는 것이 좋습니다. 이 이미지가 이미 public/assets지문 파일로 사용 가능한 경우 해당 경로가 참조됩니다.
이미지 URI를 CSS 파일에 직접 포함시키는 방법 인 데이터 URI를 사용하려는 경우asset_data_uri 도우미를 .
.logo { background: url(<%= asset_data_uri 'logo.png' %>) }올바른 형식의 데이터 URI를 CSS 소스에 삽입합니다.
닫기 태그는-%> 스타일 일 수 없습니다.
답변
이 스 니펫 만 작동하지 않습니다.
background-image: url(image_path('transparent_2x2.png'));그러나 이름 변경 stylename.scss 에 stylename.css.scss은 나에게 도움이됩니다.
