인라인 스타일은 내 배경으로 넣어 자산 파이프 라인에서 이미지를 끌어 할

Question

<%= link_to root_path do %> 
 
    <div class=""> 
 
     <div style="background-image:<%= image_tag " image1.png "%>"> 
 
    </div> 
 

 
    <div> 
 
     <h2>Title</h2> 
 
     <p>Paragraph</p> 
 
    </div> 
 
    </div> 
 
<% end %>

레일. .sass 파일에서 할 수 있습니다. 하지만 각각에 대한 템플릿을 만들었고 각 사진을 입력하는 것이 더 쉽다고 생각합니다.

<div style="background-image:<%= image_tag "image1.png"%>"> 이것은 구문에 대해 확신하는 선입니다.

Answer 1

는 ERB을 사용하는 경우에서 html.erb

<div class="custom-background"></div> 

에서

자산 파이프 라인에 의해 해석 될 다음 asset_path 'image.png' 중 하나에있는 이미지의 전체 경로를 반환합니다 자산로드 경로는 url() 내부에서 사용할 수 있습니다.

이

<div style="background-image: url(<%= asset_path 'image1.png' %>)"> 

심판 : CSS and ERB 당신이 Sass를 사용하는 경우, 다음과 같은 헬퍼 당신이 그것을 더 간결하게하는 데 도움이 될 것입니다

---

합니다 (underscore (_)asset_path에서 도우미주의) 그래서 인라인 div처럼 보일 수 있습니다 :

• image-url("rails.png") 반환 url(/assets/rails.png)
보다 일반적인 형태로도 사용할 수 있습니다

image-path("rails.png") 반환 "/assets/rails.png" :

• asset-url("rails.png") 반환 url(/assets/rails.png)
• asset-path("rails.png") 반환 "/assets/rails.png"

가 참조 : CSS and Sass (위의 dash (-)주의 도우미)

Answer 2

뭔가 image1 파일을 당신에게 경로를 제공하기 위해, image_path로 시도, 당신에게 img 태그를 줄 것 image_path 교체 :

<div style="background-image: <%= image_path 'image1' %>"></div> 

Answer 3

를가 아닌 인라인 스타일을 사용하기로 결정했다면, 당신은 할 수 있습니다 또한 .scss에서 image-path을 사용하십시오. .scss

.custom-background { 
background-image: image-path('image1.png'); 
}