Image styles not generated on first page load until page refreshed

The first character in your broken image file is a newline. If you remove the first byte the image can be successfully displayed (it looks like some kind of industrial robot!)

This means that somewhere in your PHP code you have a unexpected new line, either before the <?php tag or after a closing ?> tag. If this is only happening on one site then template.php in your theme is a good place to start looking.

Thank you so much @longwave.

I had space before <?php with my index.php file

I had space before <?php with my custom module file. Removing that fixed the issue for me in Drupal 8 as well.

Wow, I tried several regexes to find that whitespace but with no success. Had to try a new installation, uninstall and install back lots of modules to get to the culprit... after many hours turned out it was an empty custom .module file! Finally fixed (Drupal 8).

I have the same error and spent lot a time. After deleting the white line before <?php in my custom .module, it worked for me. Thks

The white space/ empty line before <?php was the culprit in my case as well.

Wow. I ran into this on a site that was using the Block Styles module. See: #2641330: Extra space in block_styles_bootstrap.module causes problems.

This affects Drupal 7 and Drupal 8 alike, and is totally not obvious when debugging.

Oy!! Wasted a couple hours on this gem. Had a blank line at the top of a module.

Same here, but the issue was a blank line at the end of the "settings.php" file, after the php ending tag.

Sorry to "reanimate" a closed issue, but I really want to thanks the people of this thread.
I had this problem and looked like a crazy and I only found people with this problem with Nginx and people saying "Have you tried to fix permissions?". As you say, an empty line before the opening PHP tag at a custom module was the problem in my case.

Thank you!! :D

Thanks all for the clues. My image style page refresh issue was due to a kint debug function elsewhere in the code which I had forgotten to comment out.
Live and learn. Hope this helps someone.

So, I'm back here 6 months later, having stumbled into the errant single line before the <?php tag in my settings file, causing image derivatives not to display without a browser Ctl F5. Removing the errant line solved the problem immediately.

(Btw, I use drush cr to clear cache. I noticed that the drush response to cr started to jump a line before responding as usual with the standard '[success] Cache rebuild complete' message. It was the first sign that something had changed. As soon as I removed the errant line in settings.php, the drush cr response performed as normal.)

I cannot believe that a single blank line at the beginning of my settings.php file caused me so many hours of frustration!

Its interesting that I had no problems with this on my local ddev environment, but did the moment I hosted it on an apache server.

I had the almost the same exact experience as James did except my "single blank line" was at the top of a custom module. I had no issues with it during local development but on production servers, image styles were not working. I removed the blank line and everything works again. Bit of a wild bug.

I also just got bit by this. Here is a script I used to find the blank line before a PHP tag:

#!/bin/bash

files=`find -name "*.php" -o -name "*.module" -o -name "*.theme"`
pattern="^<\?php"

for file in $files; do
  fileHead=`head -n2 $file`
  if ! [[ $fileHead =~ $pattern ]]; then
    echo $file
  fi

done

I was able to tell I was affected by this issue by the content length difference between pre and post cached requests:

curl 'http://my.lndo.site/sites/default/files/styles/media_library/public/2021-12/photo.jpg' --output a.jpg     
  % Total    % Received 
100  5135  100  5135
curl 'http://my.lndo.site/sites/default/files/styles/media_library/public/2021-12/photo.jpg' --output b.jpg 
  % Total    % Received 
100  5134  100  5134

Note the first request transferred one more byte(?) than the second one.

#21 helped locating the faulty file.
Thanks a lot, crasx

THANKS! We have wasted a fair few hours debugging this issue. Phew!

Thanks a lot @crasx!
After a few years (!) with this annoying problem on a website, I finally find the blank line at the beginning of a file with your script #21.
Amazing, now it finally works!

I recently had an issue where when I would upload a new image (and before saving the form), the image uploads via ajax (standard with drupal), but the thumbnail showed broken. I checked and the thumbnail was available in files directory. The image would show when i would right lcick on the broken thumbnail and hit "load image". After stumbling on many things I found it was a blank space at the start of one of my custom module files.
So it is likely the space is at a place where you have added/updated some code. Check your custom modules, themes etc files.

Hi, I was 2 weeks with this issue, looking for problem in cache and reverse proxy, until I found this post.
I had a space in a custom module in front of <?php
the version of drupal i'm using drupal 9.5.11

I would like to know if the problem is Drupal, symfony or PHP?