중매인 : 동적 배경 이미지?

Question

일부 배경 정보 : 방금 ​​중개업자가 내 포트폴리오를 구축하기 시작했습니다. 프로그래밍 지식이 없으므로 나와 함께 감내하십시오 .--).

json 파일의 데이터로 생성/채워진 카드와 같은 모든 프로젝트를 나열하는 색인 ​​페이지가 있습니다. 이것은 루프가 나는 인덱스 페이지의 각 프로젝트의 카드를 만드는 데 사용할 수 있습니다 :

<div class="row"> 
    <% data.projects.projects.each do |project| %> 
    <div class="col-md-12"> 
     <h2> 
     <%= project.title %> 
     </h2> 
     <div> 
     <%= link_to 'View project', project.path, relative: true %> 
     </div> 
    </div> 
    <% end %> 
</div> 

이 내가 프로젝트 제목과 URL 설정되는 JSON 파일이다 : 지금까지

{ 
    "projects": [ 
     {"title": "One", 
     "path": "/one.html" 
     }, 
     {"title":"Two", 
     "path": "/two.html" 
     }, 
     {"title":"Three", 
     "path": "/three.html" 
     } 
    ] 
} 

을, 너무 좋아.

이제 각 카드에 고유 한 배경 이미지를 설정하고 싶습니다. 어떻게해야하는지 잘 모르겠습니다. 내가 그것을보고, 두 가지 방법 내가 걸릴 수있다 :

1. 각 카드에 대한 CSS 규칙을 작성하고 JSON에서 루프에서 클래스를 설정합니다

bg-img-1 { background-image: url("img1.jpg"); }

bg-img-2 { background-image: url("img2.jpg"); }

bg-img-3 { background-image: url("img3.jpg"); }

그리고 { "bg-img": "bg-img-x" }을 json 파일의 각 프로젝트에 추가하십시오.

그리고 내 카드 작성 루프에 'bg-img'를 각 카드의 클래스에 추가하십시오.

2. 사업부에 인라인 스타일 및 JSON 파일에서 IMG 경로 주입 :

<div class="card" style="background: url(<%= data.project.img %>)"> </div>

그러나, 이러한 솔루션 중 어느 것도 최적/우아한 것입니까? 솔루션 # 1을 사용하면 몇 군데를 변경해야하므로 변경 작업이 번거로워졌습니다. CSS & json 파일.

해결책 # 2에는 문제가 없지만 인라인 스타일링/별도의 장소에 저장된 스타일링 팬이 아닙니다.

이렇게하려면 다른 방법이 있습니까? 아니면이 중 하나를 골라야하고 각각 프로의 & 죄수를 처리해야합니까?

감사합니다.

Answer 1

Solution # 2는 완전히 미세하며 자주 사용됩니다. 배경에 대한 인라인 스타일은 표준 연습입니다