Bootstrap placeholder for the images that are called from a database - html

Question

I need some help with how to add image placeholders, so when one/or many images are called from the database, they position on top of their placeholder?
I know there is this script I would like to implement http://imsky.github.io/holder/
but how do I ensure that the images called from the database will be displayed over these placeholders?
What code would I need to do this in the html for each image, for example below? pure css would be nice if possible...
<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>
thank you.

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);
});
and your HTML should be
<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"/>