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확장 기능을 사용할 때 이미지 를 참조하는 방법에 대한 답변은 없습니다 . 나를 위해 프로덕션 과 개발 .

2.3.1 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은 나에게 도움이됩니다.

Rails 문서 참조 우리는 CSS에서 이미지 링크에 몇 가지 방법이 있다는 것을 볼 수있다. 2.3.2 절로 가십시오.

먼저 sass 파일 인 경우 css 파일의 확장자가 .scss인지 확인하십시오.

다음으로 루비 방법을 사용할 수 있습니다.

#logo { background: url(<%= asset_data_uri 'logo.png' %>) }

또는 더 좋은 특정 양식을 사용할 수 있습니다.

image-url("rails.png") returns url(/assets/rails.png)
image-path("rails.png") returns "/assets/rails.png"

마지막으로 일반적인 형식을 사용할 수 있습니다.

asset-url("rails.png") returns url(/assets/rails.png)
asset-path("rails.png") returns "/assets/rails.png"

이것으로 씹는 시간 후에 내가 찾은 것 :

작품 :

background-image: url(image_path('transparent_2x2.png')); 

// how to add attributes like repeat, center, fixed?

위의 결과는 다음과 같습니다. "/assets/transparent_2x2-ec47061dbe4fb88d51ae1e7f41a146db.png"

통지 선도 "/" , 그리고 그것을 따옴표입니다 . yourstylesheet.css.scss 의 scss extension 및 image_path 도우미 도 참고하십시오 . 이미지는 app / assets / images 디렉토리에 있습니다 있습니다.

작동하지 않습니다 :

background: url(image_path('transparent_2x2.png') repeat center center fixed;

작동하지 않는 잘못된 속성 :

background:url(/assets/pretty_photo/default/sprite.png) 2px 1px repeat center fixed;

내 마지막 수단은 이것을 공개 s3 버킷에 넣고 거기에서로드하는 것이었지만 마침내 무언가가있었습니다.

흥미롭게도 '배경 이미지'를 사용하면 작동하지 않습니다.

background-image: url('picture.png');

그러나 단지 '배경'입니다.

background: url('picture.png');

경우에 따라 다음 사항도 적용 할 수 있습니다

로고 {배경 : url (<% = asset_data_uri 'logo.png'%>)}

출처 : http://guides.rubyonrails.org/asset_pipeline.html

Rails 5, bootstrap 4에서 gem 'sass-rails'를 사용할 때 다음이 나를 위해 일했습니다.

.scss 파일에서 :

    background-image: url(asset_path("black_left_arrow.svg"));

보기 파일 (예 : .html.slim) :

    style=("background-image: url(#{ show_image_path("event_background.png") })");

이것은 매번 당신을 거기에 데려다 줄 것입니다.

background-image: url(<%= asset_data_uri 'transparent_2x2.png'%>);

기본적으로 Rails 4는 자산을 제공하지 않습니다. 이 기능을 사용하려면 config / application.rb로 이동하여 다음 행을 추가해야합니다.

config.serve_static_assets = true

https://devcenter.heroku.com/articles/rails-4-asset-pipeline#serve-assets

Rails 4에서는 간단히

.hero { background-image: url("picture.jpg"); }

css .erb 확장자를 추가 할 수 있습니다. ej : style.css.erb

그런 다음 넣을 수 있습니다.

background: url(<%= asset_path 'logo.png' %>) no-repeat;

이것은 나를 위해 일했다 :

background: #4C2516 url('imagename.png') repeat-y 0 0;