Verwendung von Bildern in Lovable

Lerne, wie du Bilder zu deinen Lovable Projekten hinzufügst

Um Bilder hinzuzufügen, kannst du eine von vier Möglichkeiten nutzen:

Lade das Bild in den Eingabeaufforderungs-Chat hoch

Lade sie einfach im Chat hoch und erkläre dem Lovable-Agenten, wo und wie sie in deinem Projekt erscheinen sollen. Zum Beispiel:

Ersetze das Logo in der Navbar durch dieses Bild

Ersetze es im visuellen Editor

Du kannst ein vorhandenes Bild direkt über die Funktion des Visual Editors ersetzen:

1. Schritt 1

   Klicke auf das Werkzeug „Edit“.

2. Schritt 2

   Wähle das Bildelement aus, das du ändern möchtest.

   
3. Schritt 3

   Ersetze das Bild.

   

Verwenden einer externen Bild-URL

Eine Möglichkeit, Bilder zu deinem Projekt hinzuzufügen, besteht darin, ein Bild über eine externe URL zu referenzieren. Auf diese Weise kannst du Bilder verwenden, die auf externen Plattformen wie Unsplash, Imgur oder einem anderen Bildhosting-Dienst gespeichert sind. Achte dabei immer auf die Urheberrechte!

So kannst du Lovable per Eingabeaufforderung anweisen, ein externes Bild zu verwenden:

1. Schritt 1

   Suche das Bild, das du verwenden möchtest.

   Du kannst zum Beispiel eine Seite wie Unsplash besuchen, ein Bild auswählen und seine URL kopieren.

2. Schritt 2

   Gib in deiner Projekt-Eingabeaufforderung einfach an, dass Lovable dieses Bild über die URL verwenden soll. Zum Beispiel:

   Use the image from this URL 
   https://upload.wikimedia.org/wikipedia/commons/thumb/7/73/Pale_Blue_Dot.png/442px-Pale_Blue_Dot.png 
   for the hero section image.
   

Verwendung von Bildern aus deinem öffentlichen GitHub-Verzeichnis

Eine weitere Möglichkeit, Bilder zu deinem Lovable-Projekt hinzuzufügen, ist die Verwendung von Bildern, die du in das Verzeichnis public deines verbundenen GitHub-Repositories hochgeladen hast. So gehst du vor:

1. Verbinde dein GitHub-Repository

   Stelle sicher, dass dein Projekt mit deinem GitHub-Repo verbunden ist. Hier erfährst du, wie du dein Repo verbindest.

2. Finde den `public`-Ordner

   Navigiere in deinem GitHub-Repository zum Verzeichnis public. Dieser Ordner wird typischerweise für Assets wie Bilder verwendet, auf die in deinem Projekt verwiesen werden kann.

3. Datei hinzufügen

   Klicke auf Add file und wähle dann im Dropdown die Option Upload files aus.

4. Ein Bild hochladen

   Im nächsten Schritt überträgst du dein Bild in dein Repo:

   • Ziehe das Bild per Drag & Drop in den public-Ordner, oder
   • Klicke auf den Link “choose your files”, um die Bilddatei zu durchsuchen und auszuwählen.
5. Die Änderungen committen

   Nachdem du dein Bild ausgewählt hast, schreibe eine kurze Commit-Nachricht (z. B. “Adding image files to be used in the app”) und klicke auf “Commit changes”, um die Datei in deinem Repo zu speichern.

6. Den Bildpfad kopieren

   Sobald die Datei hochgeladen ist, wähle sie aus und klicke dann auf das Kopiersymbol neben dem Dateinamen, um den Pfad des Bildes zu kopieren. Dieser Pfad wird in deiner Lovable-Eingabeaufforderung verwendet.

7. Das Bild in Lovable verwenden

   Du kannst nun in deinem Projekt auf dieses Bild verweisen, indem du eine Eingabeaufforderung wie die folgende verwendest:

   Add an additional image to the hero section. 
   This time, use this one from my local repo: public/c-64-close-up.jpg.jpeg
   

   Achte darauf, den Bildnamen und Pfad zu verwenden, den du im vorherigen Schritt kopiert hast.

   Das Hochladen großer Bilder in dein GitHub-Repo kann dazu führen, dass es stark anwächst, was die Leistung von Lovable beeinträchtigen kann (längere Repo-Klonzeiten, langsamerer Start von Vorschauen/Sandbox).

   Versuche, deine Bilder zu optimieren, bevor du sie in deinen public-Ordner hochlädst, indem du sie komprimierst und Abmessungen verwendest, die zu deinem Anwendungsfall passen. Verwende zum Beispiel kein Bild in Full-HD-Größe, wenn es nur als kleines Symbol angezeigt wird.

Um dir besser zu veranschaulichen, wie du Bilder mit den oben beschriebenen Methoden integrieren kannst, haben wir ein Projekt, das du dir ansehen kannst: Lovable Project Example. In diesem Projekt kannst du die tatsächlichen Eingabeaufforderungen sehen und nachvollziehen, wie jede Methode in der Praxis funktioniert.

Außerdem gibt es ein öffentliches GitHub-Repository, das die Commits, hochgeladenen Bilder und vollständigen Implementierungsdetails enthält. Du kannst das Repository hier ansehen: GitHub: Adding Images Example.

Sieh dir das Projekt und das Repository in Ruhe an, um dein Verständnis zu vertiefen und deine Implementierungsfähigkeiten zu verbessern.