在 Web 上顯示圖片

Web 支援標準的 Image 小部件和更高階的 dart:ui/Image 類（當需要更精細地控制圖片顯示時）。然而，由於 Web 瀏覽器為了安全地執行不受信任的程式碼而構建，與移動和桌面平臺相比，在處理圖片方面存在某些限制。本頁面將解釋這些限制並提供繞過它們的方法。

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

• 內建的 <img> 和 <picture> HTML 元素
• <canvas> 元素上的 drawImage 方法
• 自定義圖片編解碼器，渲染到 WebGL 畫布

每種選項都有其優點和缺點。例如，內建元素與其他 HTML 元素很好地整合，它們會自動利用瀏覽器快取、內建圖片最佳化和記憶體管理。它們允許您安全地顯示來自任意來源的圖片（更多資訊請參見下面的 CORS 部分）。當圖片必須包含在使用 <canvas> 元素渲染的其他內容中時，drawImage 非常有用。您還可以控制圖片大小，並且（在 CORS 策略允許的情況下）可以讀回圖片的畫素以進行進一步處理。最後，WebGL 提供了最高程度的圖片控制。您不僅可以讀取畫素並應用自定義圖片演算法，還可以使用 GLSL 進行硬體加速。

CORS 是一種瀏覽器用來控制一個站點如何訪問另一個站點資源的機制。其設計目的是預設情況下，一個網站不允許使用 XHR 或 fetch 向另一個網站發出 HTTP 請求。
這可以防止另一個網站上的指令碼代表使用者進行操作，並在未經許可的情況下訪問另一個網站的資源。

在 Web 上，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> 元素，以從另一個域渲染圖片。