---
url: 'https://dxpr.com/zh-hans/hc/documentation/learn-dxpr-builder/elements/image'
title: '添加图像 | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T13:50:56+00:00'
updated: '2026-10-24T17:19:22+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  添加铺满所在列、随屏幕缩放的照片或插画。

  添加图像
  登录后打开页面：悬停内容区即出现构建器控件。您的第一页介绍基础操作。
tags:
  - 'Text and media'
image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
published: true
og:
  site_name: DXPR
  updated_time: '2026-10-24T17:19:22+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      mainEntity: {  }
    -
      '@type': TechArticle
      headline: 添加图像
      description: |-
        添加铺满所在列、随屏幕缩放的照片或插画。

        添加图像
        登录后打开页面：悬停内容区即出现构建器控件。您的第一页介绍基础操作。
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T13:50:56+0000'
      dateModified: '2026-10-24T17:19:22+0000'
      author:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      mainEntityOfPage: 'https://dxpr.com/zh-hans/hc/documentation/learn-dxpr-builder/elements/image'
      articleSection: 文本与媒体
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/zh-hans/hc/documentation/learn-dxpr-builder/elements/image'
      description: |-
        添加铺满所在列、随屏幕缩放的照片或插画。

        添加图像
        登录后打开页面：悬停内容区即出现构建器控件。您的第一页介绍基础操作。
      breadcrumb:
        '@type': BreadcrumbList
        itemListElement:
          -
            '@type': ListItem
            position: 1
            name: 首页
            item: 'https://dxpr.com/zh-hans'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
      inLanguage: zh-hans
---
[帮助中心](/zh-hans/node/75)/[文档](/zh-hans/hc/documentation) /[学习 DXPR Builder](/zh-hans/hc/documentation/learn-dxpr-builder) /[搭建页面](/zh-hans/hc/documentation/learn-dxpr-builder/build) /[添加内容](/zh-hans/hc/documentation/learn-dxpr-builder/elements) /[文本与媒体](/zh-hans/hc/documentation/learn-dxpr-builder/elements/text-and-media) # 添加图像.

 学习 DXPR Builder搭建页面添加内容文本与媒体

   ## 本指南内容

 相关指南

- [在样式面板中改变元素外观](/zh-hans/hc/documentation/learn-dxpr-builder/element-settings/style-tab)

添加铺满所在列、随屏幕缩放的照片或插画。

## 添加图像

登录后打开页面：悬停内容区即出现构建器控件。[您的第一页](/zh-hans/hc/documentation/learn-dxpr-builder/getting-started/first-page)介绍基础操作。

1. 悬停列，点击其控制栏中的 **+**；空白页面请点击 **Add Elements**。打开 **Content** 选项卡并点击 **Image**。它落在列顶部，设置对话框打开。
2. 在 **Image** 下点击 **Select Image**。在 **Media browser** 中可按名称过滤，勾选一张照片并点击 **Insert selected**。
3. 点击 **SEO** 标题展开。用照片的简短描述替换 **Alt attribute** 中的文本。
4. 点击对话框中的 **Save**。再点击内容区顶部工具栏中的 **Save** 保存页面。

  ## 您会看到的内容

默认 **Image width** 为 100%。屏幕阅读器播报您的替代文本。要检查缩放，请将 **View mode** 设为 **Preview** 并收窄浏览器窗口。保存发布后访客看到您的修改。

## 设置您的图像

悬停元素，在其控制栏打开 **More > Settings**。选项：

- **Image:** 从站点媒体或文件浏览器选择图片、上传文件，或粘贴外部 URL。
- **Image width:** CSS 宽度，如 `100%` 或 `300px`。默认为 100%。
- **Image height:** 固定高度，如 `400px`。留空保持照片形状。
- **Image link:** 让图片可点击。输入 URL 或选择页面。
- **Image link target:** Same window 或 New window。添加链接后显示。
- **Alt attribute:** 在 **SEO** 分区，面向屏幕阅读器和搜索引擎的描述。
- **Title attribute:** 在 **SEO** 分区，悬停显示为提示的附加信息。

## 图片加载与页面速度

DXPR Builder 自动管理新图片的加载，保持页面快速并防止内容跳动。页面开头的图片，以及选项卡、轮播和跑马灯内的图片保持立即可见。更下方图片可随访客滚动加载。

图片可来自媒体库、上传文件或外部 URL。保存前让图片在编辑器中加载完毕，DXPR Builder 才能预留合适的空间。替换图片更新其尺寸，不改变您选择的显示尺寸。

站点已有图片不会自动升级。页面速度还取决于图片文件大小和其他内容。请在宽窄屏幕检查发布页。

## 如果看不到它

- **Content 选项卡中没有 Image。** 您的用户档案隐藏了它。请管理员到[用户档案](/zh-hans/hc/documentation/learn-dxpr-builder/admin/user-profiles-admin)启用。
- **重新加载后消失。** 页面未保存。请重新添加并点击内容区顶部工具栏中的 **Save**。
- **图像元素为空。**尚未在 **Image** 字段设置图片。请悬停元素打开 **More > Settings**，点击 **Select Image**。
- **出现破图图标。** 文件在媒体库中被删除或移动。请悬停元素打开 **More > Settings**，移除所选并重选图片。
- **图片被拉伸或压扁。** **Image width** 和 **Image height** 都是与照片不符的固定值。请清空 **Image height** 恢复形状。

## 接下来做什么？

[样式选项卡](/zh-hans/hc/documentation/learn-dxpr-builder/element-settings/style-tab)：改变图像的间距和背景。