C'est un cas particulier assez tordu, mais TL;DR : il faut mettre une balise [img] si tu veux pouvoir spoil une image.
L'explication derrière c'est qu'une URL simple est interprétée comme une balise [media], de façon à reconnaître automatiquement les images mais aussi les liens youtube, fichiers audio, etc. Au moment du rendu, une balise [media] est considérée comme un élément de type bloc (au sens CSS) à l'inverse d'une balise [img] qui est considérée comme un élément de type inline. C'est une approximation inexacte puisque certains (tous ?) des types d'URL reconnus par [media] se traduisent en fait par un code HTML inline, mais au cas où l'un d'entre eux soit de type bloc alors l'ensemble de la balise doit l'être (simplement parce que l'implémentation actuelle rattache cette notion à la balise, et même si [media] est une balise un peu complexe elle ne possède qu'un type).
Résultat, utiliser spoiler autour d'une balise [media] (ou une URL simple, ce qui est équivalent) ne fonctionne pas car un élément inline ne peut pas englober un élément bloc. C'est pour ça que dans ton test 1 avec des caractères autour, si tu regardes le code HTML généré la balise spoiler est refermée avant l'image et réouverte après, de façon à
rester valide. Quand tu utilises une balise [img] ce problème n'apparaît pas, la balise spoiler peut englober le tout.
Une façon simple de résoudre ce problème serait de déclarer la balise [media] inline, je vais regarder si c'est possible actuellement ou si l'un des services supportés l'empêche.