仲人：動的背景画像？

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" 
     } 
    ] 
} 

を、とても良い。

私がしたいことは、各カードに（独特の）背景画像を設定することです。私はそれを見るように、2つのアプローチは、私が取ることができるあります

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. div要素にインラインスタイルを設定し、JSONファイルからIMGパスを注入：

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

しかし、これらのソリューションのどちらが最適な/エレガントに見えますか？ 解決策1を使用すると、いくつかの場所で変更を加える必要があるため、変更することは面倒になります.CSC & jsonファイル。

解決策＃2にはその問題はありませんが、私はインラインスタイリングのファン/別の場所に保存されたスタイリングを持っていません。

これは別の方法ですか？あるいは、私はこれらのうちの1つを選んでプロの&のそれぞれの短所を扱わなければならないのですか？

ありがとうございます！

Answer 1

Solution＃2は完全に細かく、しばしば使用されます。背景のインラインスタイルは標準的な練習です