HTML Bildern lokal die url im img tag abändern

[obilaner]

Hallo.

Wie kann ich alle Bilder einer Klasse oder eines speziellen Typs anhand irgendeines Mechanismus der möglichst kurz und generisch ist, weil man oft solche Bilder erstellt (Innerhalb eines seiteninternen wysiwyg Beitragseditors) an unterschiedlichen Orten mit einer Funktion so manipulieren das ihr src attribut von dem Dateinamen um das Lokale Verzeichniss, also den Lokalen Pfad plus den Dateinamen erweitert wird?

Der Editor schreibt einen Modulcode der in einer php Datei gespeichert wird.
Diese php Datei wird wie bei einenem CMS an einer anderen Stelle wieder geladen.

Aber nicht nur da sondern eben auch im Editor. Und an allen Orten lokal muss der img src Tag abgeändert werden automatisch.

In der Modul.php Datei steht nur der Name der Bilddatei ohne funktionierenden Pfad. Der wechselt ja ständig.

Hab alles mögliche gedanklich durchgespielt. JS/this , ändern per css classe als selektor. Ich kriegs nicht hin. Einzigste was mir einfiel aber das wäre irgendwie pfuscherei wäre den Code string beim lesen auf eine codefolge wie class=diesebildart" dann ändere von src=" gleich dahinter bis " den Text ab. Oder zwingend ein onload=" attribut zu verlangen indem eine funktion drin steht und der text des dateinamen für einen selektor übergeben wird.. Klingt aber alles ein wenig nach pfusch..

Weiss jemand was kurze einfaches generisches?

Toll wäre wenn man innerhalb dieses Editors einfach nur bildname.jpg reinkopiert und beide Stellen (Editor und in dem fall die Shopfrontseite wo man ua so module für exp aquirieren kann später) würden dann lokal zum anzeigen den lokalen pfad hinzufügen (Bestehend aus ModulID und einem url prefix wie module/system/

Edit: Habs hinbekommen durch:

function setimageurls(){   
    $(".mofibild").each(function() {
        var src = $(this).attr("src");
        var newsrc = "temp/"+beitragid+"/"+src;       
        $(this).attr("src", newsrc);
  });
}

 

[Henni]

Ohne den ganzen Kontext zu kennen wäre es nicht vielleicht besser das als web component zu implementieren? Sprich im HTML steht z.B.:

<my-img src="images/blub42.jpg"></my-img>

und im DOM wird daraus z.B.:

<my-img src="images/blub42.jpg">
    <img src="temp/42/images/blub42.jpg">
</my-img>

Grund für diesen Vorschlag => du weisst jetzt dass es da ein JS gibt dass diese Transformation durchführt - aber wie sieht es in X Jahren aus? Oder ein fremder Entwickler kommt neu zum Projekt? Solche versteckten Konvertierungen sind die Hölle in jedem Projekt dass kein PoC (selbst da) ist und mehr als Entwickler daran arbeiten.

Nur so als Denkanstoß.