Wie zeige ich Links als Grafiken in SharePoint mit JSON an?

Verwende JSON-Spaltenformatierung: Erstelle ein img-Element im JSON-Schema, das die URL aus der Spalte als src-Attribut nutzt. So werden Links automatisch als Vorschaubilder dargestellt.

Mit json in SharePoint online vom Link zur Grafik

Autor

Eric Fischer

Datum 24. Mai 2020

Kategorie Cloud und Microsoft 365

Bildschirmfoto 2020 05 24 Um 00.55.45 1024x430 1

Inhalt

SharePoint Online: Mit JSON vom Link zur Grafik
Wann ist das nützlich?
Voraussetzungen
JSON-Formatierung anwenden
Erweiterte Formatierung
Tipps für die Praxis

SharePoint Online: Mit JSON vom Link zur Grafik

SharePoint-Listen sind ein vielseitiges Werkzeug in Microsoft 365. Mit JSON Column Formatting kannst du das Erscheinungsbild von Spalten anpassen – zum Beispiel Links zu Bildern automatisch als Vorschaubilder darstellen. In diesem Artikel zeigen wir dir, wie du mit einfachem JSON-Code aus einem Link eine Grafik-Vorschau in deiner SharePoint-Liste machst.

Wann ist das nützlich?

Diese Technik ist besonders hilfreich, wenn du eine SharePoint-Liste als Bilddatenbank, Produktkatalog oder Mitarbeiterverzeichnis nutzt. Statt nur einen URL-Link zu sehen, wird die Grafik direkt in der Listenansicht angezeigt. Das verbessert die Übersichtlichkeit und spart Klicks.

Voraussetzungen

Du benötigst eine SharePoint Online-Liste mit einer Spalte vom Typ Einzelne Textzeile oder Hyperlink, die den vollständigen URL zum Bild enthält. Die Bilder müssen öffentlich erreichbar sein oder sich im gleichen SharePoint-Tenant befinden.

JSON-Formatierung anwenden

Klicke in deiner SharePoint-Liste auf den Spaltenkopf der Bild-URL-Spalte und wähle Spalteneinstellungen → Diese Spalte formatieren. Wechsle in den Erweiterten Modus und füge folgenden JSON-Code ein:

Der JSON-Code erstellt ein img-Element, das den Wert der Spalte als src-Attribut nutzt. Du kannst die Höhe und Breite des Bildes über die style-Attribute im JSON anpassen. Typische Werte sind 120px Breite für Thumbnails oder 200px für größere Vorschauen.

Erweiterte Formatierung

Du kannst die Bildvorschau weiter anpassen: einen Hover-Effekt hinzufügen, der das Bild vergrößert, einen Fallback-Text anzeigen, wenn kein Bild vorhanden ist, oder das Bild anklickbar machen, sodass es in einem neuen Tab in voller Größe geöffnet wird.

Tipps für die Praxis

Achte darauf, dass die Bild-URLs korrekt formatiert sind und auf gültige Bilddateien verweisen (JPG, PNG, GIF, SVG). Nutze für interne Bilder den vollständigen SharePoint-URL inklusive Tenant-Domain. Teste die Formatierung mit verschiedenen Bildgrößen, um die optimale Darstellung zu finden. Bei Problemen prüfe, ob die Bilder die richtigen Berechtigungen haben.