如何使用图片组件？

图片组件是在页面上展示一张图片的模块，通过设置图片的描述文字、链接、展示形状、特效等实现丰富的单图展示效果。

二、图片组件有哪些应用场景？

图片组件的应用场景很广泛，比如“公司介绍”页面，需要用图片和文字的形式来介绍公司，其中单张图片就可以用图片组件来实现，通过设置图片的描述文字、链接、展示形状、特效等实现丰富的单图展示效果，图片组件通常可以与文本组件、按钮组件配合使用，达到更丰富多样的展示效果。

图片组件与文本组件配合使用，展示效果举例：

三、如何使用图片组件？

如果你的页面上已经有这张图片了，就不需要再添加，直接根据需要进行相关操作就可以（具体操作见下文所述）；

如果你的页面上需要这张图片，但是还没有添加，就需要通过添加图片组件来实现添加这张图片了，操作方法如下：

1、如何添加图片组件？

在页面上添加组件的方法都是一样的，单击查看如何添加组件？要添加的组件名称为“图片”，如下图所示：

2、如何设置图片组件？

需要进入图片组件的“设置”功能去设置，进入组件的“设置”分两种情况：

1）此组件已经添加好的情况：进入所有这种情况下组件的设置，方法都是一样的。

2）新添加的组件情况：在添加此组件时会弹出这个组件的设置窗口。

在弹出的设置图片窗口，可以设置图片的内容、风格、特效以及高级功能。

内容：

添加图片：

选择图片：首次上传这张图片，需要从“本地选择”上传，若之前曾上传过这张图片，可以单击“从资料库选择”按钮从资料库选择这张图片，若需要删除这种图片，可以单击“清除”；

如果是替换原来的图片，会显示原来的图片尺寸，如下图所示，制作新图片时按照原来的尺寸制作上传就可以。

添加图片Alt属性：
图片Alt属性：为图片添加注释。默认取图片名称，是搜索引擎对图片唯一识别的标签，请一定要填写，对网站优化有好处。并且图片无法显示时，会显示图片Alt属性；

添加图片Title属性：

图片Title属性：为图片链接添加注释。当鼠标悬停图片时显示的文字，对用户体验有好处。

添加图片描述：

图片描述：根据需要可以对图片做文字描述，这些描述可以显示在图片下方或悬停在图片上，图片描述的展示风格可以在“风格”标签中去设置；

设置图片描述的展示风格：

如果输入了文字描述，可以在如图所示位置选择描述展示风格，如果选择了带蒙层的风格，可以设置蒙层的颜色；

设置图片蒙层颜色：

添加图片链接：
图片链接：可以为这张图片添加链接，单击此图片即可跳转这个链接；

设置图片位置：
图片位置：可以选择这张图片显示在这个组件中的位置为左对齐、居中或右对齐。

高级：
设置Pad端图片、手机端图片：

为了在不同终端展示更好的图片效果，支持上传分别显示在pc、pad或手机端的图片，也支持分别设置图片的alt属性和tile属性，操作方法如下下图所示：

风格：

设置图片展示的形状：

选择图片展示风格：可以根据需要选择此图片的展示风格，默认、圆角、圆形、相框，如下图所示：

设置图片描述展示风格：

选择描述展示风格：可以根据需要选择图片描述文字展示的位置，不展示、图片下方或图片上。

设置图片蒙层颜色：

图片蒙层颜色设置：若图片描述文字显示在图片上，在图片与文字之间会有一个蒙层，支持设置蒙层的颜色。

特效：
支持设置页面初次加载图片的特效和鼠标悬停在图片上时图片的特效，特效多种多样，如下图所示；

3、保存、预览、发布

设置好以上功能以后要单击页面右上角的“保存”按钮，目的是把此修改保存到网站后台；

然后可以单击“预览”按钮查看不同终端下展示的效果，如果不合适可以到后台再做修改；

如果需要让访客也看到，需要单击页面右上角的“发布”按钮，发布之后稍等两分钟左右即可看网站前台展示效果。