0

I have a webpage which takes some user input and uses it to update an image by running a shell script through PHP. This image is then displayed to the user without refreshing the page they are on (using an ajax request). The general gist is:

  1. User makes selection on web page
  2. Web page sends ajax request to server
  3. PHP (laravel) catches the ajax request and runs a shell script to update an image
  4. PHP returns the ajax response and says whether the image was updated or not
  5. If the image was updated, javascript refreshes the image for the user using the following code: $("#back_thumbdiv_med").find("> img").attr("src", url + "?" + new Date().getTime());

The problem is that the images don't load properly. Here is an example of a loaded image.

Cut off image

It's interesting to note that the part of the image that is showing is actually part of the old image not the new image. What could be causing this? How can I fix it? Could this be related to my site being run on a VM through vagrant?

Also, if the user navigates away from the page and back, the image will obviously return to the old version because it's cached. I'd like the images to be cached but to be able to force a refresh after the ajax request returns. What

MattCochrane
  • 2,900
  • 2
  • 25
  • 35
  • What happens when you look at the image directly in the browser (type in it's url. Did you look at the image that's on the server? The chances are that the trouble is with your shell script and nothing at all to do with your javascripts – e4c5 Oct 06 '15 at 00:20
  • If i navigate to that URL in the browser I get the cutoff image, even if I append a different, random query string. Looking at the files directly on the server however a full image can be seen with no defects. It seems like some kind of server side caching issue, maybe it has a cached copy in memory that it read in while the file was being written by the script and is therefore corrupted. – MattCochrane Oct 06 '15 at 00:25
  • But why are your passing the image through a script? Why not put the generated image on a separate folder and treat it as a static item? that way you can avoid these issues. – e4c5 Oct 06 '15 at 00:28
  • The script generates the image. It updates a few renderings for the user. The renderings are of the same object so its preferable to have the image paths stay constant and just change the images. The images are also accessed from other places based on the final selection by the user. The old renderings are no longer needed once a new one is generated so making copies like you're suggesting doesn't really make sense in this case. – MattCochrane Oct 06 '15 at 00:35
  • I am not all suggesting that you make copies. My suggestion was to stop delivering images through a script. The image should be served as a static url. You have already explained that your image creating, displaying is a two step process, so this should be quite easy to achieve. – e4c5 Oct 06 '15 at 00:42
  • Maybe I wasn't very clear, the image is at a static url. I'm not transmitting the contents of the image via the ajax request. Once the script returns the browser tries to refresh the image from the same static url as before (though with the query added to force the server to refresh. see: [this post](http://stackoverflow.com/questions/1077041/refresh-image-with-a-new-one-at-the-same-url)). Maybe I'm not quite understanding what you mean by 'delivering images through a script'. The images are generated by a script and delivered over http to the the user via a standard http request. – MattCochrane Oct 06 '15 at 00:52

1 Answers1

0

This issue happened to be to do with running my Apache server under Vagrant (in virtualbox).

To fix the issue I just had to add the following lines to my apache config file (/etc/httpd/conf/httpd.conf or equivalent):

#Disable image serving for network mounted drive
EnableSendfile off

Note that it's worth searching through the config file to see if EnableSendfile is set to on anywhere else.

MattCochrane
  • 2,900
  • 2
  • 25
  • 35