Heres what I would do:
1) Upload the images to the survey resources folder (usually upload/surveys/surveyID/)
2) Add a <span> element to the text of the boilerplate question containing the replacement field for your image number source. Give the span a class of "imageSpan". So for the token survey it would look something like:
<span class="imageSpan">{TOKEN:ATTRIBUTE_1}</span>and for the open survey it would be (inserting the correct IDs, of course):
<span class="imageSpan">{INSERTANS:SSSSSXGGXQQ}</span>
3) Add the following script to the surce of the boilerplate. Replace "QQ" with the boilerplate ID and "11111" with your survey ID.
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
var qID = QQ;
var imagepath = 'upload/surveys/111111/';
// Get the image number from the image span and prepend with an extra 0 if necessary
var imageNum = $('#question'+qID+' .imageSpan').text();
if(String(imageNum).length < 2) {
imageNum = String('0' + imageNum);
}
// Insert the appropriate image into the image span
$('#question'+qID+' .imageSpan').text('').html('<img border="0" src="'+imagepath+imageNum+'.jpg" />');
});
</script>
This script insert a basic image tag without any attributes except src and border.
You may want to add some behaviour if an image number is not found or is invalid.
