Question

Here is a sample page having an issue:

http://estorkdelivery.com/template/view/69

Our website serves up a template preview. Once you enter text information and tab out of a field, the website serves up an updated preview of the image with the text added to the field.

When the server returns this image:

http://estorkdelivery.com/file/preview/verify_token:149505eb811f8856a12ec6e71e2932f082a97edf

It shows up broken with the following message in my console:

Resource interpreted as Image but transferred with MIME type text/html: http://estorkdelivery.com/file/preview/verify_token:149505eb811f8856a12ec6e71e2932f082a97edf

Trying to cover all bases, I’ve verified the server has the following MIME types set:

application/x-javascript .js

image/jpeg jpeg jpg jpe

image/png png

I’m not sure why this is happening. I was wondering if someone could help me troubleshoot. Any ideas?

Thanks!

Update 04/27/2012 – My question was marked down, but I have done research on this issue. If this question doesn’t merit an answer, can someone at least point me in the direction I need to go in order to continue troubleshooting? I don’t ask questions lightly and I have read plenty of similar issues on StackOverflow to find myself still with the same problem. It’s discouraging to be marked down without a polite explanation. Thanks.

Answer 1

Honestly, I don’t think it’s a server setup problem; when your AJAX request comes back with a verify_token, I can use that to get an image from your server. Then, using JavaScript, I can get the new preview to display on the page.

This section looks odd:

new $._iframeUpload(form, {
  success: function(response)
  {
    $('.preview').attr('src', 'http://estorkdelivery.com/file/preview/verify_token:' 
        + response.verify_token);
    var image = new Image();
    image.src = 'http://estorkdelivery.com/file/preview/verify_token:' 
        + response.verify_token;
    image.onload = function()
    {
      $queue--;
      if ($queue <= 0)
        $('.updating').hide();
    };
  }
}); 

I don’t really understand why an Image object is being created after editing the img tag. I would change your JavaScript to look like this (so that the onload callback works):

new $._iframeUpload(form, {
  success: function(response)
  {
    var image = new Image();
    image.onload = function()
    {
      $('.preview').attr('src', image.src);
      $queue--;
      if ($queue <= 0)
        $('.updating').hide();
    };
    image.src = 'http://estorkdelivery.com/file/preview/verify_token:' 
        + response.verify_token;
  }
}); 

Try that and tell me if it helps.

Minor quirk

This isn’t really in answer to your question, but it influences how this whole image loading process works. Your preview is 700 x 500, but the new previews that you’re returning from your server are 2900 x 2100! That’s making your AJAX load time much longer than your initial page load. You might consider sizing it down on the server side and then transfering it to the browser.