Hallo

Für eine Seite möchte ich Bilder im Seiteninhalt als Thumbnails und sie in ihrer normalen Größe per Button in einem Popover geöffnet anzeigen. Zu Testzwecken benutze ich die Originalbilder statt dedizierter Thumbnails für die verkleinerte Anzeige in den Buttons.

Für die Ausgabeelemente benutze ich eine Struktur us einem figure mit dort herinnen enthaltenem img, die ich per template bereitstelle. Wird die Seite aufgebaut, lese ich die vorhandenen Thumbnails aus, entnehme die darin enthaltenen img-Elemente und erzeuge die verborgenen Popovers aus dem Template. Aus dem ausgelesenen img-Element des Thumbnails entnehme ich die URL des Bildes, um sie in das src-Attribut des Zielelements einzufügen.

Das funktioniert soweit. Was aber nicht funktioniert, ist, die intrinsischen Größenangaben auszulesen. Schaue ich mir die Eigenschaften des Objekts des Quellbildes in der Browserkonsole an, finde ich die Angaben zu naturalWidth und naturalHeight, ermittle ich sie per imgElement.naturalWidth (respektive .naturalHeight), erhalte ich stets und ständig 0-Werte.

Mein Code ist in dieser Hinsicht so aufgebaut, wie alle Codebeispiele, die ich finden konnte. Ermittle das Bild im DOM und greife dessen Eigenschaften ab.

// thumb ist das Objekt des Buttons
// es enthält nur das auszulesende img-Element
const imgEl = thumb.querySelector("img");

console.log(imgEl);                // Kontrollausgabe: <img …/>
console.log(imgEl.naturalWidth);   // Kontrollausgabe: 0
console.log(imgEl.naturalHeight);  // Kontrollausgabe: 0

Was übersehe ich hierbei? Das mit console.log(imgEl); in der Konsole angezeigte Objekt hat die für mich nicht auslesbaren Eigenschaften. Warum komme ich da nicht ran?

Tschö, Auge