Skip to main content
画像を追加するには、次の 4 つの方法があります。
チャットにアップロードして、プロジェクトのどこに、どのように表示したいかを Lovable の Agent に伝えてください。例えば:
ナビバーのロゴをこの画像に差し替えて
ビジュアルエディター機能を使って、既存の画像を直接置き換えることができます。
1

手順 1

「Edit」ツールをクリックします。
2

手順 2

変更したい画像ホルダーを選択します。images/visual-edit-replace.png
3

手順 3

画像を変更します。images/visual-edit-image.png
プロジェクトに画像を追加する 1 つの方法は、外部 URL から画像を参照することです。この方法を使うと、Unsplash や Imgur などの外部プラットフォーム、その他の画像ホスティングサービスにある画像を利用できます。著作権の取り扱いには注意してください。Lovable に外部画像を使わせるプロンプトの書き方は次のとおりです。
1

ステップ 1

使用したい画像を見つけます。たとえば、Unsplash のようなサイトにアクセスして画像を選び、その URL をコピーします。
2

ステップ 2

プロジェクトのプロンプト内で、その URL を指定して Lovable にその画像を使うように伝えます。例:
Lovable プロジェクトに画像を追加するもう 1 つの方法は、接続している GitHub リポジトリの public ディレクトリにアップロードした画像を使うやり方です。手順は次のとおりです。
1

GitHub リポジトリを接続する

プロジェクトが GitHub リポジトリに接続されていることを確認します。詳しい接続方法については、リポジトリを接続する方法はこちらを参照してください。
2

public フォルダを見つける

GitHub リポジトリ内で、public ディレクトリに移動します。このフォルダは通常、プロジェクト内で参照できる画像などのアセットを保存するために使用されます。
3

ファイルを追加する

Add file をクリックし、表示されるドロップダウンから Upload files オプションを選択します。 アップロードするファイルを選択している画面
4

画像をアップロードする

次に、画像をリポジトリにアップロードします：
  • 画像を public フォルダにドラッグ＆ドロップする、または
  • “choose your files” リンクをクリックして、画像ファイルを参照して選択します。 アップロードするファイルを選択している画面
5

変更をコミットする

画像を選択したら、簡単なコミットメッセージ（例: “Adding image files to be used in the app”）を入力し、“Commit changes” をクリックして、ファイルをリポジトリに保存します。
6

画像パスを取得する

ファイルがアップロードされたら、そのファイルを選択し、ファイル名の横にあるコピーアイコンをクリックして画像のパスをコピーします。このパスは Lovable のプロンプト内で使用します。 アップロードするファイルを選択している画面
7

Lovable で画像を使用する

これで、次のようなプロンプトを使って、プロジェクト内でこの画像を参照できるようになります:
前のステップでコピーした画像のファイル名とパスを必ず使用してください。
大きな画像ファイルを GitHub リポジトリにアップロードすると、リポジトリのサイズが大きくなり、Lovable のパフォーマンス（リポジトリのクローンにかかる時間が長くなる、プレビュー/サンドボックスの起動が遅くなるなど）に影響する可能性があります。public フォルダにアップロードする前に、画像を圧縮したり、利用シーンに適した解像度に変更したりして最適化するようにしてください。例えば、小さなアイコンとしてしか表示しない場合に、フル HD サイズの画像を使用しないようにしましょう。
上記の方法で画像を統合する手順をよりよく理解できるように、閲覧できるプロジェクトを用意しています: Lovable プロジェクト例。このプロジェクトでは、実際のプロンプトと、各方法がどのように動作するかを確認できます。また、コミット内容、アップロードされた画像、実装の詳細が含まれた公開 GitHub リポジトリもあります。こちらからリポジトリを閲覧できます: GitHub: Adding Images Example。このプロジェクトとリポジトリを自由に探索して、理解を深め、実装スキルを高めてください。