在 Lovable 中使用图像

了解如何将图像添加到您的 Lovable 项目中

要添加图像，您可以采用以下四种方法之一：

将图像上传到提示聊天

只需在聊天中上传图像，然后向 Lovable 的 AI 解释您希望这些图像在项目中出现的位置和方式。

在视觉编辑器中替换图像

您可以使用视觉编辑器功能直接替换现有图像：

步骤 1： 点击“编辑”工具。

步骤 2： 选择您想要更改的图像占位符。

步骤 3： 更改图像。

使用外部图像 URL

将图像添加到项目的一种方法是通过引用外部 URL 中的图像。这种方法允许您使用托管在 Unsplash、Imgur 或其他图像托管服务上的图像。请注意版权使用问题！

以下是提示 Lovable 使用外部图像的步骤：

步骤 1： 找到您想要使用的图像。例如，您可以访问 Unsplash 等网站，选择一张图像，然后复制其 URL。

步骤 2： 在您的项目提示中，直接告诉 Lovable 使用该图像，并指定 URL。例如：

使用来自此 URL 的图像  
https://upload.wikimedia.org/wikipedia/commons/thumb/7/73/Pale_Blue_Dot.png/442px-Pale_Blue_Dot.png  
作为英雄部分的图像。  

使用 GitHub 公共目录中的图像

将图像添加到 Lovable 项目中的另一种方法是使用上传到已连接 GitHub 仓库的 public 目录中的图像。以下是操作步骤：

1. 连接您的 GitHub 仓库

确保您的项目已连接到您的 GitHub 仓库。了解如何连接仓库。

2. 定位 public 文件夹

在您的 GitHub 仓库中，导航到 public 目录。此文件夹通常用于托管可供项目引用的资产，如图像。

3. 添加文件

点击 添加文件，然后从下拉菜单中选择 上传文件 选项。

4. 上传图像

下一步是将您的图像传输到仓库：

• 拖放图像到 public 文件夹中，或
• 点击 “选择您的文件” 链接以浏览并选择图像文件。

5. 提交更改

选择图像后，编写一个简单的提交消息（例如，“添加图像文件以用于应用”），然后点击 “提交更改” 以将文件保存到仓库。

6. 获取图像路径

上传文件后，选择该文件，然后点击文件名旁边的复制图标，以复制图像的路径。此路径将在 Lovable 提示中使用。

7. 在 Lovable 中使用图像

现在，您可以在项目中引用此图像，使用类似于以下的提示：

在英雄部分添加一个额外的图像。  
这一次，使用我本地仓库中的这个： public/c-64-close-up.jpg.jpeg  

请确保使用上一步复制的图像名称和路径。

warning

将大型图像上传到 GitHub 仓库可能会导致仓库大小增加，从而影响 Lovable 的性能（例如，仓库克隆时间变长，预览或沙盒启动变慢）。
在将图像上传到 public 文件夹之前，请尝试优化图像，例如压缩它们并使用与您的用例相关的尺寸。如果图像仅作为小图标显示，不要使用全高清尺寸的图像。

为了帮助您更好地理解上述方法如何整合图像，我们提供了一个可供探索的项目：Lovable 项目示例。在此项目中，您可以看到实际的提示以及每种方法在实践中的工作方式。

此外，这里有一个公共 GitHub 仓库，其中包含提交记录、上传的图像以及完整的实现细节。您可以查看该仓库：GitHub: 添加图像示例。

随意探索该项目和仓库，以加深您的理解并提升您的实现能力。