Hoe kan het dat een plaatje het lokaal niet doet als het begint met een / ervoor, maar online wel?

Die / aan het begin betekent dat "map" een map in de root directory van de webserver staat. Specifieker uitgedrukt: dit is een "absoluut pad" (absolute path). Als je die eerste / weghaalt dan kijkt hij gewoon in de huidige directory (van de html file) en dan wordt het een "relatief pad" (relative path). In de root directory zal geen directory "map" bestaan bij jou of hij is onbereikbaar, maar wel op de server.

Hier zijn nog nuances en uitzonderingen op mogelijk maar normaal gesproken is het zo.

Aangezien het bij jou lokaal werkt zonder / heb jij de html opgeslagen en de subdirectories die daarbij horen. Dat is zoals je het wilt hebben

Want eerlijk gezegd is het raar geschreven in de html, want juist om dit soort redenen wil je liever dat op die webserver ook relatieve paden worden gebruikt. Dit maakt ook het integraal verplaatsen van webcontent een stuk makkelijker. (Stel men wil er een andere site naast gaan draaien en die hele mikmak van deze site in een andere directory zetten, dan moet men dus dit soort absolute paden gaan lopen aanpassen. Dat hoeft niet als alles relatief gehouden wordt.)

Kortom: is het jou eigen website? Dan zou ik de boel relatief gaan maken in plaats van absoluut. Is het andermans website? Dan zit 'ie slecht in elkaar en moet jij helaas de absolute paden relatief blijven maken voordat de site bij jou lokaal werkt.