Image Loading Problem in Templates

Hi All,

I am having a problem with the inital loading of images that I have defined as part of my template. They are showing up with the broken image icon in both Firefox and IE, with no image or broken image icon in Chrome. Below is the template I am using (the one in the Developers Guide) and what I have done so far to debug the problem.

// Register a templates definition set named "default".
CKEDITOR.addTemplates( 'default',
{
   // The name of sub folder which hold the shortcut preview images of the templates.
   imagesPath : CKEDITOR.getUrl( CKEDITOR.plugins.getPath( 'templates' ) + 'templates/images/' ),

   // The templates definitions.
   templates :
      [
         {
            title: 'My Template 1',
            image: 'template1.gif',
            description: 'Description of my template 1.',
            html:
               '<h2>Template 1</h2>' +
               '<p><img scr="http://localhost/testProj/custom/templates/templates/images/template1.gif" style="float:left" />Type the text here.</p>'
         },
         {
            title: 'My Template 2',
            html:
               '<h3>Template 2</h3>' +
               '<p><img scr="http://a.cksource.com/e/1/img/logo-cksource-docs.gif" style="float:left"></p>'
         }
      ]
});

When I chose templates, the dialog opens and I see the 'templates.gif' and I click it to load the first template 'My Template 1'. This opens the template successfully however the template.gif is not loaded, instead it shows the broken image icon.

If I view the source, I see the correct html that you'd expect with the src attribute showing the absolute path to 'template1.gif' on my localhost. If I then go back to the design pane (clicking source again) and right click on the image->Image properties->Image Info Tab and add the same absolute path to the URL textfield and save. The Image then shows up correctly and what is interesting here is that if I click the Source tab again in the toolbar it has added a second src attribute to the <img> element which is identical to the original src attribute.

I have also tried adding a submit button to send the contents of the ckeditor/textarea back to the same script that outputs the editor. This script just displays the contents underneath the ckeditor. I thought that the image loading issue could just be the ckeditor having problems loading images internally initially. So, if I start afresh again and submit the initial template with the image seen as a broken icon. It also fails to load below the ckeditor and is seen again as a broken icon directly in the browser, outside of the ckeditor. Again, the image is correctly displayed underneath the ckeditor if I sumbit after I manually edit image properties as described above.

So, this seems to be an issue outside of the ckeditor I thought, but maybe the ckeditor's javascript isn't initally loading the images correctly and is stopping the loading outside the editor?? So I looked at the API for a function to preload images explicitly. Something like the imageCacher function. I've added the below code to my config.js file, to my templates.js file and after my 'CKEDITOR.replace' function call at separate times, but the alert is not seen.

var images = array('http://localhost/testProj/custom/templates/templates/images/template1.gif');
var test = function(){alert('Please Work')};
CKEDITOR.imageCacher.load(images, test);

Either way, I'm sure I should not need to do this using the function above. Does anyone have any ideas on further debugging I could perform, or even better if someone has seen this before and has something like a solution or cause of the problem.

Anyway, thank you in advance anyone who can help in any way.

Cheers,
Paul.