Why Does the Browser Need to be Refreshed to Display Image in PHP File?

December 21, 2015 2.4k views
Miscellaneous Linux Commands Ubuntu

Part of my PHP code in a program, uses rsync -va to pull an image file from a server, back to the server doing the pull, with the image file being stored in that server. The PHP code then displays text from a database, but the image will not display. It will display, if I refresh the browser.

The following line of code is used to display the image.

echo "<tr><th>Image: </th><td style = 'width: 300'><img src='$image_path{$row["new_file_name"]}' width = '300' height = '225' /></td></tr>";

$image_path holds part of the address where the image is stored. That coupled with a jpg file name from the database, {$row["new_file_name"]}, gives me the complete path to the image.

I'm not sure why the image doesn't display immediately, though, just as the text is doing. Why do I need to refresh the browser and how do I get the image to display without doing that?

  • You mentioned that your backend code uses rsync to copy the file over. Is it possible that you get the new filename and push the change to your HTML page before the image is available at that location? That would be my first guess if the image is showing up properly after a refresh.

  • Thanks for replying ryanpq. That's a good thought.

    I checked, though, and the rsync code is the step/line before the displaying code, so I'm assuming the pulled image file has made it into its storage directory, before the display code activates.

    Would you think it has to do with a www-data owner file?
    -rw-r--r-- 1 www-data www-data 42805 Dec 21 17:09 1234.jpg

  • sams.folk rsync is by default asynchronus, which means it will return to the PHP execution immediately after calling the command. you can make the rsync call a blocking call and it will return when complete, or load the image with a delay (please don't add a delay in your execution code, better load the image asynchronously with JS and double check it exists)

  • Thanks for your help JCakeC.

    I may not be following you correctly. Are you saying the steps are like this?
    1) In a line of PHP code, rsync is activated and starts its task of pulling the image.
    2) But while doing so, it goes to my next line of code to display the image. However, the image doesn't get displayed, due to this line of code being finished executing, before the image is pulled/stored in its directory. I.e., the storing directory is still empty when the display code comes calling.

    I was reading about rsync and blocking. I added the option with the snippet of code below, but things are still not working, and I'm not receiving any errors. Everything works except getting the image to display, until browser is refreshed.

    $first_path = "path to image to be pulled/".$row["new_file_name"];          
    $second_path= " path to store the pulled image";
    exec('rsync --blocking-io' .$first_path. $second_path);
    echo "<tr><th>Image: </th><td style = 'width: 300'><img src='$second_path{$row["new_file_name"]}' width = '300' height = '225' /></td></tr>";

    Thanks again.

Be the first one to answer this question.