在網頁上顯示圖片

網頁支援標準的 Image 小工具和更進階的 dart:ui/Image 類別（在需要更精細的控制來顯示圖片時）。但是，由於網頁瀏覽器的設計目的是安全地執行不受信任的程式碼，因此與行動和桌面平台相比，您在圖片方面可以執行的操作存在某些限制。此頁面說明了這些限制，並提供了解決這些限制的方法。

網頁提供了幾種顯示圖片的方法

• 內建的 <img> 和 <picture> HTML 元素
• drawImage 方法在 <canvas> 元素上
• 呈現到 WebGL 畫布的自訂圖片編解碼器

每個選項都有其自身的優點和缺點。例如，內建元素可以很好地融入其他 HTML 元素中，並且它們會自動利用瀏覽器的快取、內建圖片優化和記憶體管理。它們允許您安全地顯示來自任意來源的圖片（更多內容請參閱下方的 CORS 章節）。當圖片必須符合使用 <canvas> 元素呈現的其他內容時，drawImage 非常適合。您還可以控制圖片大小，並且在 CORS 政策允許的情況下，讀取圖片的像素以進行進一步處理。最後，WebGL 讓您對圖片擁有最高的控制權。您不僅可以讀取像素並套用自訂圖片演算法，還可以使用 GLSL 進行硬體加速。

CORS 是一種瀏覽器用於控制一個網站如何存取另一個網站資源的機制。它的設計方式是，預設情況下，不允許一個網站使用 XHR 或 fetch 對另一個網站發出 HTTP 請求。
這可以防止其他網站上的腳本代表使用者操作，以及未經許可存取其他網站的資源。

在網頁上，Flutter 使用 CanvasKit 或 skwasm（在使用 Wasm 時）渲染器來渲染應用程式。它們都依賴 WebGL。WebGL 需要存取原始圖片資料（位元組），才能夠渲染圖片。因此，圖片必須僅來自具有設定為與您的應用程式服務網域搭配使用的 CORS 政策的伺服器。

在 Flutter 中有多種解決方案可以繞過 CORS 限制。

如果應用程式在記憶體中具有編碼圖片的位元組，以 資源 的形式提供，或儲存在為應用程式提供服務的同一伺服器上（也稱為同源），則無需額外努力。可以使用 Image.memory、Image.asset 或 Image.network 來顯示圖片。

通常，可以將內容傳遞網路 (CDN) 設定為自訂允許哪些網域存取您的內容。例如，Firebase 網站託管允許在 firebase.json 檔案中指定自訂 Access-Control-Allow-Origin 標頭。

如果無法設定圖片伺服器以允許來自您的應用程式的 CORS 請求，您可能仍然可以通過將請求代理到另一個伺服器來載入圖片。這要求中間伺服器具有足夠的存取權限來載入圖片。

當原始圖片伺服器公開提供圖片，但未設定正確的 CORS 標頭時，可以使用此方法。

範例

• 使用 CloudFlare Workers。
• 使用 Firebase Functions。

如果其他解決方案都不適用於您的應用程式，Flutter 支援使用 HtmlElementView 將原始 HTML 嵌入應用程式內部。使用它來建立 <img> 元素以從其他網域渲染圖片。

除非另有說明，否則本網站上的文件反映了 Flutter 的最新穩定版本。頁面最後更新於 2024-11-20。 檢視原始碼 或 回報問題。