Is there an easier way to load random images?

Can anybody point towards an easier method to load random images on my index.html page?

This is the current method I'm using

In the head section:

<script type="text/javascript">
var imageURLs = [
   "css/images/avatars/1.png"
 , "css/images/avatars/2.jpg"
 , "css/images/avatars/3.png"
 , "css/images/avatars/4.png"
 , "css/images/avatars/5.png"
 , "css/images/avatars/6.png"
 ];
 function getImageTag() {
 var img = '<img src=\"';
 var randomIndex = Math.floor(Math.random() * imageURLs.length);
 img += imageURLs[randomIndex];
 img += '\" alt=\"Oh no, the image is broken!\"/>';
 return img;
 }
 </script>

In the body section:

    <!-- RANDOM IMAGE 1 -->
    <script type="text/javascript">
    document.write(getImageTag());
    </script>
    <!-- RANDOM IMAGE 2 -->
    <script type="text/javascript">
    document.write(getImageTag());
    </script>

I currently have 410 images altogether so you can image how annoying it is within the head section code