添加图片

3.8. 添加图片#

图片原文件统一存储在引用文档所在的同级目录文件夹下。

显示图片直接使用 image 或 figure 指令，无特殊情况的话我们书籍图片要求使用居中方式显示， 还需要添加 alt 选项指定图片的描述，用于网站中使用，以便图片加载失败时显示文字。

不要使用bmp图片 ，bmp图片在生成pdf的时候会丢失，所以不要使用bmp格式的图片。

备注

推荐使用 figure 命令插入图片。

3.8.1. 使用 image 指令#

.. image:: picture.jpeg
   :class: class-name
       :name: name
   :height: 100 px(长度)
   :width: 200 px (长度或者百分比)
   :scale: 50 % (百分比，百分号可省略)
   :alt: alternate text
   :align: right
       :target: https://www.baidu.com

align可选top,middle,bottom,left,center,right

target使得图片可点击跳转。

scale表示等比例伸缩（放大或者缩小）

重要

scale需要和width或者height（或者2者）一起使用。

简明语法：

.. image:: ../../_images/logo.png
   :align: center
   :alt: Logo

图片还可以使用 width、heigh、scale等参数，但不推荐使用。 设置过width、height参数的图片，在页面可以点击查看原图。

示例

.. image:: ./logo.png
   :align: center
   :width: 5.63529in
   :height: 0.97222in

效果

_images/logo.png

3.8.2. 使用 figure 指令#

.. figure:: picture.png
   :figwidth: 200 px (长度或者百分比)
   :scale: 50 %
       :align: center
       :figclass: figure-class
   :alt: map to buried treasure

    +---------------------------+
    |        figure             |
    |                           |
    |<------ figwidth --------->|
    |                           |
    |  +---------------------+  |
    |  |     image           |  |
    |  |                     |  |
    |  |<--- width --------->|  |
    |  +---------------------+  |
    |                           |
    |The figure's caption should|
    |wrap at this width.        |
    +---------------------------+

figure相当于一个画布（类似于html中的一个div或者一个canvas）， 它对处于其内的内容进行样式统一管理。相比image可以包含除图片外的更多内容。

figure支持image的所有指令选项参数，除了align在figure中指示整个画布的对齐方式。 且它只能选择为left,center,right。

重要

和 image 一致，要使得 scale （这里是对整个画布作用）起作用需要和 figwidth 一起使用

figure 添加图片时可以使用标题与legend。一般在使用时要加入引用。 语法如下：

示例

.. figure: ./logo.png
   :alt: logo
   :align: center

   图片的标题

效果

logo

图 3.8.1 图片的标题#

3.8.3. 引用图片#

在图片、表格上面加一个引用标签，然后通过 ref 或 numref 引用。

示例

.. _my-reference-label支持中文:

.. figure: ./logo.png
   :alt: OSGeo中国中心
   :align: center
   :name: refii

引用方式 :numref:`my-reference-label支持中文` 。

效果

OSGeo中国中心

图 3.8.2 必须写这个图片名#

引用方式 必须写这个图片名 。

备注

对于 figure 对象，可以通过 :name: 来进行引用，如 引用方式2： 必须写这个图片名 。这种方式是更推荐的。

目录