データベースから呼び出された画像のブートストラッププレースホルダ

Question

画像プレースホルダを追加する方法について助けが必要なので、データベースから1つまたは複数の画像が呼び出されると、プレースホルダの上に配置されますか？

http://imsky.github.io/holder/ を実装したいこのスクリプトがありますが、データベースから呼び出されたイメージがこれらのプレースホルダに表示されるようにするにはどうすればよいですか？

各画像のhtmlでこれを行うにはどのようなコードが必要ですか？可能であれば純粋なCSSがいいでしょう...

<div class="container"> 
    <div class="row"> 
     <div class="col-md-12"> 
     <img src="img1" data-src="" class="img-responsive"> 
     <img src="img2" data-src="" class="img-responsive"> 
     </div> 
    </div> 
</div> 

ありがとうございます。

Answer 1

function readURL(input) { 
if (input.files && input.files[0]) { 
var reader = new FileReader(); 
reader.onload = function(e) { 
    $('#previewHolder').attr('src', e.target.result); 
} 

reader.readAsDataURL(input.files[0]); 
} 
} 

$("#filePhoto").change(function() { 
readURL(this); 
}); 

とあなたのHTMLはあるべき

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"> 
</script> 
<input type="file" name="filePhoto" value="" id="filePhoto"  
class="required borrowerImageFile" data-errormsg="PhotoUploadErrorMsg"> 
<img id="previewHolder" alt="Uploaded Image Preview Holder" width="250px" height="250px"/>