배경 이미지에 URL 삽입

Question

@media #{$only-small} { 

    .beverages--element .inner:before{ 
     background-image: url(....); 
     background-repeat: no-repeat; 
    } 
} 

나는이 코드 조각을 가지고 음료수 목록에 음료수를 표시하는 상자 스타일을 지정하는 데 사용됩니다.

지금까지 모든 음료에 항상 동일한 이미지를 사용했습니다. 이제 논리를 확장해야하는데, 각 음료는 이제 다른 이미지를 가지고 있습니다. 이미지는 클라우드 서비스에 저장되며 음료가 저장되는 데이터베이스에 링크가 있습니다. 보기에서 CSS로 링크를 전달하려면 어떻게해야합니까?

감사합니다.

Answer 1

하나의 옵션은 html로 백그라운드 이미지를 인라인으로 설정하는 것입니다. 마찬가지로 :

Answer 2

자산 파이프 라인을 사용하는 것이 좋지만 작은 코드의 경우 다음과 같은 방법을 사용할 수 있습니다. CSS에 .css.erb 확장자를 사용해야하며 런타임에서 CSS의 코드를 평가하게해야합니다.

@media #{$only-small} { 

    .beverages--element .inner:before{ 
     background-image: <%= @beverage_url_image %>; 
     background-repeat: no-repeat; 
    } 
} 

여기서 @beverage_1_url_image에는보기의 URL이 있어야합니다.