如何使用圖片組件？

一、什麼是圖片組件？

三、如何使用圖片組件？

如果你的頁面上已經有這張圖片了，就不需要再添加，直接根據需要進行相關操作就可以（具體操作見下文所述）；

如果你的頁面上需要這張圖片，但是還沒有添加，就需要通過添加圖片組件來實現添加這張圖片了，操作方法如下：

1、如何添加圖片組件？

在頁面上添加組件的方法都是一樣的，單擊查看如何添加組件？要添加的組件名稱為“圖片”，如下圖所示：

2、如何設置圖片組件？

需要進入圖片組件的“設置”功能去設置，進入組件的“設置”分兩種情況：

1）此組件已經添加好的情況：進入所有這種情況下組件的設置，方法都是一樣的，可以參考這個攻略：如何進入組件的設置項？

2）新添加的組件情況：在添加此組件時會彈出這個組件的設置窗口。

在彈出的設置圖片窗口，可以設置圖片的內容、風格、特效以及高級功能。

內容：

添加圖片：

選擇圖片：首次上傳這張圖片，需要從“本地選擇”上傳，若之前曾上傳過這張圖片，可以單擊“從資料庫選擇”按鈕從資料庫選擇這張圖片，若需要刪除這種圖片，可以單擊“清除”；

如果是替換原來的圖片，會顯示原來的圖片尺寸，如下圖所示，製作新圖片時按照原來的尺寸製作上傳就可以。

添加圖片Alt屬性：
圖片Alt屬性：為圖片添加註釋。默認取圖片名稱，是搜索引擎對圖片唯一識別的標籤，請一定要填寫，對網站優化有好處。並且圖片無法顯示時，會顯示圖片Alt屬性；

添加圖片Title屬性：

圖片Title屬性：為圖片鏈接添加註釋。當鼠標懸停圖片時顯示的文字，對用戶體驗有好處。圖片Alt屬性與Titl屬性的區別，詳情請參考此鏈接https://www.webcan.cn/id3192243.html

添加圖片描述：

圖片描述：根據需要可以對圖片做文字描述，這些描述可以顯示在圖片下方或懸停在圖片上，圖片描述的展示風格可以在“風格”標籤中去設置；

設置圖片描述的展示風格：

如果輸入了文字描述，可以在如圖所示位置選擇描述展示風格，如果選擇了帶蒙層的風格，可以設置蒙層的顏色；

設置圖片蒙層顏色：

添加圖片鏈接：
圖片鏈接：可以為這張圖片添加鏈接，單擊此圖片即可跳轉這個鏈接；鏈接類型多種多樣，可以根據需要選擇，單擊查看鏈接類型介紹；

設置圖片位置：
圖片位置：可以選擇這張圖片顯示在這個組件中的位置為左對齊、居中或右對齊。

高級：
設置Pad端圖片、手機端圖片：

為了在不同終端展示更好的圖片效果，支持上傳分別顯示在pc、pad或手機端的圖片，也支持分別設置圖片的alt屬性和tile屬性，操作方法如下下圖所示：


風格：

設置圖片展示的形狀：

選擇圖片展示風格：可以根據需要選擇此圖片的展示風格，默認、圓角、圓形、相框，如下圖所示：

設置圖片描述展示風格：

選擇描述展示風格：可以根據需要選擇圖片描述文字展示的位置，不展示、圖片下方或圖片上。

設置圖片蒙層顏色：

圖片蒙層顏色設置：若圖片描述文字顯示在圖片上，在圖片與文字之間會有一個蒙層，支持設置蒙層的顏色。


特效：
支持設置頁面初次加載圖片的特效和鼠標懸停在圖片上時圖片的特效，特效多種多樣，如下圖所示；

3、保存、預覽、發布

設置好以上功能以後要單擊頁面右上角的“保存”按鈕，目的是把此修改保存到網站後台；

然後可以單擊“預覽”按鈕查看不同終端下展示的效果，如果不合適可以到後台再做修改；

如果需要讓訪客也看到，需要單擊頁面右上角的“發布”按鈕，發布之後稍等兩分鐘左右即可看網站前台展示效果。