레일. CSS 파일에서 표시 할 이미지를 가져올 수 없습니다.

이미 여러 가지 방법을 시도했지만 아무 것도 작동하지 않았습니다. 여기에 뭔가 빠졌습니까?레일. CSS 파일에서 표시 할 이미지를 가져올 수 없습니다.

이 내가 시도 것입니다 ...

th a.asc { 
    background-image: url(up_arrow.gif); 
} 

th a.desc { 
    background-image: url(down_arrow.gif); 
}

및

th a.asc { 
    background-image: url("assets/up_arrow.gif"); 
} 

th a.desc { 
    background-image: url("assets/down_arrow.gif"); 
}

및

th a.asc { 
    background-image: url(assets/up_arrow.gif); 
} 

th a.desc { 
    background-image: url(assets/down_arrow.gif); 
}

및

th a.asc { 
    background-image: url(<%= asset_path "up_arrow.gif" %>); 
} 

th a.desc { 
    background-image: url(<%= asset_path "down_arrow.gif" %>); 
}

및 ...

및 그 이상.

내가

index.css.erb, 파일 application.css, application.css.scss, application.css.erb, application.scc.scss.erb, index.css, index.css.scss 이름을 바꾼

나는 이것을 읽었습니다 ... http://edgeguides.rubyonrails.org/asset_pipeline.html#coding-links-to-assets 및 404 when displaying background image in CSS with rails 3.2 및 Rails 3.1 serving images from vendor/assets/images 및 Rails 3.1 and Image Assets 및 다른 페이지에서 stackoverflow.

하지만 내 이미지가 표시되지 않습니다. 그들은 app/assets/images 디렉토리에 있습니다. 나는 이중 체크하고 트리플 체크하고 예, 그들은 그 위치에 있습니다. Google 크롬에서 요소 검사를하고 이미지 링크를 클릭하면 링크가 깨졌습니다.

출처

2012-07-09 leonel

그리고 당신의 CSS 파일은 어느 디렉토리에 있습니까? – abhshkdz

'app/assets/stylesheets' – leonel

로컬로 개발 중이거나 프로덕션 중입니까? –

처음 모습이 좋아 보이며 저에게 좋습니다. 확인해야 할 사항 몇 가지 :

CSS 파일과 동일한 디렉토리에 이미지 up_arrow.gif가 있습니까? (CSS가 HTML 페이지에 있고 html 파일과 같은 디렉토리에있는 경우)
Firefox의 Firebug 나 Safari와 같은 디버그 도구를 마우스 오른쪽 버튼으로 클릭하고 "Inspect Element"를 선택합니다 Safari 환경 설정에서 먼저 개발자 메뉴에 있음). 계산 된 CSS 속성이 예상 한 것인지 확인한 다음 리소스/네트워크 탭을보고 브라우저가 올바른 위치에서 이미지를로드하려고하는지 확인하십시오.
이미지가 bg 이미지로 사용되고 있지만 A 요소가 너무 작기 때문에 보이지 않는 것입니까? A 요소에 텍스트가 없으면 0x0이됩니다. 텍스트 및/또는 크기 속성이있는 경우 배경 이미지에 빈 공간이 있으면 여전히 너무 작을 수 있습니다. 이 경우 A 태그를 더 크게 만들어보십시오. 예 : CSS에 width 및 height 속성을 추가하고 display : block 속성도 필요합니다.

이미지를 버튼으로 만들려면 A 태그 안에 IMG 태그를 넣으면됩니다. 원하는 경우 CSS를 작동시킬 수는 있지만 조금 더 쉬울 수도 있습니다.

이 나를 위해 작동합니다

이

<html> 
<head> 
<style type='text/css'> 
    th a.asc { 
     background-image: url(up_arrow.png); 
     width: 32px; height: 32px; display: block; 
    } 
</style> 
</head> 
<body> 
<table><tr><th><a class='asc'></a></th></tr></table> 
</body> 
</html>

출처

2012-07-09 17:24:57 webjprgm

아, 질문의 하단 부분을 읽었어야 했으므로 이미지를로드하는 것과 관련이 있습니다. 0x0 A 엘리먼트를 가지고 있습니다. 아마도 edralph의 대답이 더 좋을 것입니다. – webjprgm

asset-url를 사용하여 귀하의 마지막 예제가 몇 가지 가정 작동합니다 ...

자산 파이프 라인이 실제로
(config.assets.enabled = true에 대한 config/application.rb보기에) 사용할 수 있습니다 (말의 :assets 그룹) sass-rails이 sass-rails이 Gemfile에서 그룹의 일부입니다 귀하의 Gemfile
경우에이 개발 환경에서 Bundler가 보석 그룹을로드하고 있는지 확인해야합니다. 당신에 config/application.rb이 같은 내용을 볼 수있을 것이다
```
if defined?(Bundler) 
    # This loads your :assets group in the development and test environments 
    Bundler.require *Rails.groups(:assets => %w(development test)) 
end
```
이 특정 스타일은 SASS 스타일 시트 (즉, asset-url이 sass-rails 보석에서 도우미 있기 때문에 확장 .SASS 또는 .SCSS을 가져야한다)
이 스타일 시트가 실제로 (이 application.css.scss을 지정해야합니다 또는 필요/@application.css.scss으로 포함) 자산 파이프 라인에로드

이 모든 사실 후에도 문제가있는 경우 , 뭐, 어리석은 일이 벌어지고 있다고 말하고 싶습니다.

출처

2012-07-09 18:10:55 BaronVonBraun

마지막으로, application.css.scss에 추가하지 않고 어떻게 작동시킬 수 있습니까? – kinduff

레일. CSS 파일에서 표시 할 이미지를 가져올 수 없습니다.

답변

관련 문제