Si la página se pinta y las imágenes están rotas, el HTML está bien y algo de las peticiones de imagen no lo está. Abre el panel de red, recarga y lee la columna de estado a la luz de las cuatro causas de abajo.

404: la ruta está mal

curl -sSI https://yourdomain.com/img/rack.webp | head -1
ls -la /var/www/site/public/img/rack.webp

En Linux el nombre de archivo distingue mayúsculas. Rack.webp y rack.webp son archivos distintos, y por eso un sitio desarrollado en Windows o macOS pierde sus imágenes en el momento de desplegarse.

403: existe y no se puede leer

sudo -u www-data test -r /var/www/site/public/img/rack.webp && echo readable || echo NOT readable
namei -l /var/www/site/public/img/rack.webp

namei recorre todos los directorios de la ruta. Un solo directorio padre sin permiso de ejecución bloquea todo lo que hay debajo, mientras el archivo en sí parece perfectamente correcto.

Bloqueada, o contenido mixto

Una imagen pedida por http en una página https la bloquea el navegador y la muestra en la consola como contenido mixto. Consulta Contenido mixto tras pasar a HTTPS. Un bloqueador de anuncios también descarta todo lo que lleve en la ruta palabras como ads o banner.

200 y aun así no se ve

  • El archivo no tiene el formato que dice su nombre: una página de error HTML guardada como .jpg, por ejemplo.
  • Una CDN devolvió un error cacheado. Purga esa ruta y vuelve a pedirla.
  • La imagen está ahí y tiene altura cero: eso es CSS, no el archivo.
file /var/www/site/public/img/rack.webp
curl -sS https://yourdomain.com/img/rack.webp | head -c 20 | xxd | head -2
Si todo lo anterior va bien en local pero se rompe a través de un proxy, pide el origen directamente con --resolve y compara. Eso parte el problema por la mitad con una sola orden.