图片

图片元素是您可以插入到画布上的图像占位符，与其他元素分开。请记住，图片元素不同于应用于元素（如部分或 div 块）的背景图像。

在本教程中，您将发现：

1. 插入图片的方法
2. 调整图片设置的技巧
3. 替换图片的步骤
4. 图片样式设置方法
5. 添加替代文本的说明

如何插入图片

您可以从以下位置插入图片到您的 Webflow 站点：

• 插入面板
• 资源面板
• 快速搜索
• 你的设备

笔记： 图片的最大文件大小为 4MB。

有价值的信息： 当您将图片上传到资源面板时，Webflow 会生成图片的响应式变体。不过，我们建议您在将图片上传到 Webflow 之前对其进行优化。了解有关图片分辨率的更多信息。

阅读互联网上最常用的图片文件格式。

插入面板

要从插入面板插入图片元素：

1. 导航至 插入面板
2. 点击并拖动 图片 元素拖到 Webflow 画布上

要使用您的某个图片文件替换占位符，请执行以下操作：

1. 选择 图片 画布上的元素
2. 访问 元素设置面板
3. 选择 选择图片
4. 选择之前上传的图片或点击“云”图标可上传新图片 资源面板

资源面板

一旦你将照片上传到 资源面板，您可以将图片拖拽到画布上。

您可以通过 3 种方式将图片上传到资源面板：

1. 点击 ”云”图标 资源面板 并从您的设备中选择要上传的图片
2. 将设备中的图片拖放到 资源面板
3. 将图片直接拖放到画布上

了解有关如何将图片插入资源面板的更多信息。

快速搜索

快速搜索是 Webflow Designer 中内置的一个功能强大的搜索栏。您可以使用 命令 + 埃 （在 Mac 上）或 控制 + 埃 （在 Windows 上）并按名称搜索您已上传到资源面板的任何图片。

你的设备

您可以将图片直接从设备拖到画布上。

如何解决图片上传问题

如果您在尝试上传图片时收到“上传失败”警报，请检查以下内容：

• 图片文件：确保图片文件未损坏、具有正确且受支持的文件扩展名，并且不大于 4MB
• 检查你的互联网连接：即使互联网连接速度较慢（最低 5 mbps），您也应该能够上传图片。为确保互联网速度没有问题，请仔细检查您的互联网连接并确认信号强度。了解如何排除互联网连接故障。
• 检查你的浏览器扩展：某些浏览器扩展程序可能会在将图片上传到 Webflow Designer 时导致问题。尝试从隐身或私人浏览窗口上传图片，或了解如何排除浏览器扩展程序故障。

如何调整图片设置

要访问图像设置，有四种方法可用。首先，选择画布上的图像组件，然后：

1. 双击图像组件
2. 打 进入/返回 键盘上的键
3. 单击图像组件标签旁边的类似“齿轮”的图标
4. 按 德 或导航至 元素设置面板

之内 图像设置，您有能力：

• 选择图片 — 使用任意图片替换默认占位符 资源面板。只需双击图像组件并选择 选择图片 来自 图像设置 窗户
• 调整图像尺寸 — 为图片的宽度或高度指定特定的像素值。这些尺寸将应用于所有断点，但宽度和高度的单独设置可以覆盖 元素设置面板 对于每个断点。您还可以选择通过拖动图像的角来调整图像大小。请注意，调整图像大小不会超出其父元素的尺寸
• 为图像启用 HiDPI 模式 — 勾选此框后，图片的像素宽度将减半。例如，宽度为 600px 的图片将显示为 300px。此像素密度可确保在大多数 HiDPI 移动显示屏上获得最佳图像质量
• 指定加载行为— 修改图像加载首选项。“延迟”加载会在页面加载时加载可见折叠上方的图像，并在用户滚动到折叠下方的图像时加载它们；“急切”加载会在网站加载期间立即加载页面上的所有图像；“自动”加载会根据浏览器的设置进行调整

替换图像内容

将图像插入画布后，您可以根据需要灵活地替换它。要替换图像：

1. 在画布上突出显示图像
2. 导航至 元素设置面板 > 图像设置
3. 选择 替换图片 打开 资源面板
4. 选择现有图像或上传新图像

增强图像美感

利用 样式面板 以增强图像的视觉吸引力。请注意，某些样式属性不适用于图像，例如背景样式。对于图像的叠加效果，请考虑使用背景图像。

利用类来对图像进行样式化，这样可以优化时间效率，因为您可以将一个类应用于多幅图像。应用于该类的任何样式都会影响与其相关的所有图像。这种方法在通过以下方式建立尺寸规范时特别有利： 样式面板 而不是 元素设置面板。通过利用类，您可以省去手动调整每幅图像大小的麻烦。

以下是一些可用于为您的图像增添光彩的样式属性示例： 

• 圆角半径： 在一侧或多侧实现圆角。要定义半径，请访问 样式面板 > 边界 > 半径.
• 阴影： 创建阴影效果以增强图像的外观。要设置阴影，请访问 样式面板 > 效果 > 盒子阴影.
• 筛选器： 应用各种滤镜，如模糊、灰度或棕褐色调。要添加滤镜，请导航至 样式面板 > 效果 > 筛选器.

添加替代文本

描述性文字是对隐藏在图片“内部”的图片的简洁描述（与标题不同，它不显示在网站页面上），用于在无法显示或查看图片时解释图片。这有助于有视力障碍或失明的人理解您的图片内容，或者在图片文件未加载或用户选择不查看图片时显示替代文本。搜索引擎使用替代文本来识别图片的内容。

要在图像中引入替代文本：

1. 选择画布上的图片
2. 访问 元素设置面板 > 图像设置
3. 继续 替代文本 并选择 自定义描述
4. 在下拉菜单下方的空间中构建替代文本

如果图像仅仅是装饰性的（即，它没有提供任何有价值的信息），你也可以选择 装饰性的 从替代文本下拉菜单中。

您还可以在 资源面板 这样，每次您从“资产”面板将图像附加到您的网站时，该图像都会配备替代文本。

实现动态替代文本

您可以在动态收藏列表和收藏模板页面中使用图像元素。了解有关图像字段的更多详细信息。

为这些图像配置动态替代文本：

1. 选择 图像
2. 导航至 元素设置面板 > 图像设置
3. 核实 从以下位置获取替代文本
4. 选择包含图像替代文本的部分（例如“名称”）