How do I specify HTML to display an image randomly?

I have like 138 products in my database. I wish to use only 10 images and randomly select any of these 10 images to be displayed besides their name in HTML .

My HTML code is :

<div class="row">
<div class= "col-md-4"  ng-repeat="coffeedata in coffecataloge">
   <!-- <script type="text/javascript" > alert(counter); if(counter%3 == 0) ++row_number; </script> -->
   <div id="product-box" style="width:600px;height:250px" >
      <div style="width:350px;height:250px;border:1px solid #000;">
         <div></div>
        <!-- IMAGE TO BE INSERTED HERE --> <div> <img src="/coffee/pick_any_of_the_10_images_randomly.jpg" /> </div>
         <div>In Stock : </div>
         <div>Price: </div>
         <br><br><br>
         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
         <a href="#add-to-cart" class="btn btn-red btn-effect">Add to Cart</a>
      </div>
   </div>
   <br>
</div>

How can I achieve this using Javascript and HTML? Thank you so much.