Applies ToSharePoint Server 訂閱版本 SharePoint Server 2019 Microsoft 365 中的 SharePoint 商務用 Office SharePoint 系統管理中心 由 21Vianet 提供的 SharePoint

當您 新增新式頁面至網站時,您可以新增及自訂 網頁元件,這些網頁元件是頁面的建置組塊。 本文將說明如何使用圖像網頁元件。 使用它在頁面上插入圖像,無論是從您的網站、電腦,還是從網路插入圖像。 您可以裁剪、調整大小及取代現有的影像。

新增影像至頁面

新增圖像網頁元件

裁剪您的影像

調整影像大小

拖曳或貼上以取代現有的影像

新增或取代頁面上的影像

在頁面上新增或取代影像最簡單的方法就是拖曳或貼上。 

拖曳以新增影像或取代現有影像

  1. 如果您尚未處於編輯模式,請按一下頁面右上角的 [編輯 ]。

  2. 執行下列其中一項操作: 若要新增影像,只要將您要使用的影像拖曳到您要放置圖像的區段即可。若要取代影像,請按兩下要取代的影像,然後將新影像拖曳至影像。

您可能需要視需要調整影像大小或重新裁剪影像。

貼上以取代影像

  1. 如果您尚未處於編輯模式,請按一下頁面右上角的 [編輯 ]。

  2. 複製您要新增或取代現有影像的影像。

  3. 在頁面上,按兩下圖像網頁元件以選取影像。

  4. 按鍵盤上的 CTRL+V

新增圖像網頁元件

  1. 如果您尚未處於編輯模式,請按一下頁面右上角的 [編輯 ]。

  2. 將滑鼠停留在現有網頁元件上方或下方,或在標題區域底下,按一下 [ Circled plus sign used to add a modern web part to a page],然後選取 [圖像 ] 網頁元件。

  3. 從下列其中一個選項中選擇最近使用的影像或影像:

    • Microsoft 提供的影像庫存

    • 網路搜尋

    • 網站

    • 您的電腦

    • 連結

    • 如果貴組織已指定一組核准的影像,您就可以在 [您的組織] 底下選擇該影像集。

      檔案選擇器選項的影像。

      附註: 

      • Web 搜尋會使用 Bing 影像來使用 Creative Common 授權。 在您將影像插入頁面之前,您必須先檢閱影像的授權。

      • 如果您是 SharePoint 管理員,並想要瞭解如何為您的組織建立資產庫,請參閱建立組織資產庫

      • 如果您是 SharePoint 系統管理員,建議您啟用內容傳遞網路 (CDN) ,以改善取得影像的效能。 深入瞭解 CDN

  4. 根據影像的來源) ,按一下 [ 啟] 或 [ 新增 影像 (]。

  5. 您也可以選擇在網頁元件的影像底下輸入標題。

  6. 按一下左側)Web part edit button (編輯 網頁元件 ,即可變更影像、新增影像連結、在影像上新增文字,以及為使用螢幕助讀程式) 的使用者新增或變更替代文字 (。

    圖像網頁元件工具箱

    自動替代文字 當您插入影像時,系統會自動為螢幕助讀程式) 使用者 (替代文字。 在許多情況下,除非您變更或移除文字,否則文字會自動與您的影像一起儲存。 如果影像替代文字的信賴等級不高,您會在影像上看到提醒,讓您檢閱及變更或保留替代文字。

    含有替換文字提示的影像

附註:  SharePoint Server 訂閱版本 和 SharePoint Server 2019 只在編輯網頁元件時支援替代文字。

裁剪您的影像

您可以不使用或不使用預先設定長寬比來裁剪影像。

  1. 如果您尚未處於編輯模式,請按一下頁面右上角的 [編輯 ]。

  2. 按一下您要變更的影像。 將會顯示編輯影像的工具列。

    影像工具列

    • 1. 長寬比

    • 2. 以免費比例裁剪

    • 3. 復原

    • 4. 重設

    • 5. 預覽 (儲存)

使用長寬比裁剪

裁剪長寬比可讓您決定影像的寬度和高度。 下圖中以藍色框線的區域會顯示 1:1 (方形) 長寬比選取範圍。

長寬比裁剪範例
  1. 按一下 [ 外觀比例] 按鈕 長寬比裁剪按鈕] 。

    其他工具列會飛出,提供不同長寬比的選項。

    長寬比工具

    選取您想要的長寬比。 16:9 是最左邊長寬比選項,後面接著 3:2、4:3 和 1:1。 您會看到預覽方塊,顯示圖片裁剪的方式。 您可以移動圖片中的裁剪方塊來變更裁剪的區域。

    您也可以旋轉裁剪方塊,以變更長寬比方向的顯示方式,方法是按一下 [ 旋轉裁剪框 ] 按鈕 [旋轉裁剪框] 按鈕

  2. 完成後,按一下 [ 儲存 儲存] 。

手動裁剪

免費裁剪範例
  1. 按一下 [ 裁剪可用比例 ] 按鈕 [裁剪不含長寬比] 按鈕 裁剪,而不使用長寬比。 然後拖曳影像每一側的其中一個方塊,讓影像更窄、更寬、更高或更短。

  2. 完成後,按一下 [ 儲存 儲存] 。

調整影像大小

當您處於編輯模式時,您可以選取影像來顯示調整大小控點,或選取影像工具列上的 [ 設大小] 按鈕來調整其大小。 然後拖曳其中一個控點,讓影像變成您要的大小。

調整影像上的控點大小

附註: 

復原或重設

使用 [ 復原 ] 按鈕 復原裁剪 來復原上一個動作。 使用 [ 重設 ] 按鈕 重設影像裁剪 來復原您一次所做的所有變更,將影像傳回您上次儲存之後的狀態。

拖曳或貼上以取代現有的影像

如果您的頁面上有現有的圖像網頁元件,您可以編輯網頁元件並選擇不同的影像來取代影像,或是將新影像拖曳或複製並貼到您要取代的圖像上。 若要貼上,您需要使用鍵盤快速鍵貼上 (CTRL+V) 。 步驟如下:

複製和貼上

  1. 如果您尚未處於編輯模式,請按一下頁面右上角的 [編輯 ]。

  2. 複製您要取代現有影像的影像。

  3. 在頁面上,按兩下圖像網頁元件以選取影像。

  4. 按鍵盤上的 CTRL+V

拖放

  1. 如果您尚未處於編輯模式,請按一下頁面右上角的 [編輯 ]。

  2. 選取您要取代現有影像的影像。

  3. 在頁面上,按兩下圖像網頁元件以選取影像。

  4. 將影像拖曳到現有影像上方。

附註: 您可能需要視需要調整影像大小或重新裁剪影像。

另請參閱

圖像庫網頁元件

主圖網頁元件

需要更多協助嗎?

想要其他選項嗎?

探索訂閱權益、瀏覽訓練課程、瞭解如何保護您的裝置等等。

社群可協助您詢問並回答問題、提供意見反應,以及聆聽來自具有豐富知識的專家意見。