技術文章 » Blazor Hybrid （Blazor混合開發）更好的讀取本地圖片

Blazor Hybrid （Blazor混合開發）更好的讀取本地圖片

2023-01-29 18:01:19

在 Blazor Hybrid 應用中，Razor 元件在裝置上本機執行。 元件通過本地互操作通道呈現到嵌入式 Web View 控制元件。 元件不在瀏覽器中執行，並且不涉及 WebAssembly。 Razor 元件可快速載入和執行程式碼，元件可通過 .NET 平臺完全存取裝置的本機功能。 Web View 中呈現的元件樣式與平臺相關，可能需要你使用自定義樣式表來說明不同平臺之間的呈現差異。

如何在Blazor Hybrid中讀取本地圖片展示？

在Blazor Hybrid經常遇到一些讀取選中的圖片並且渲染，但是檔案的目錄在Blazor中直接src填寫是無法讀取到的，這個時候就可能需要將檔案Copy到wwwroot中，或者將其轉換Base64放入到html中，但是base64轉換圖片是很長的一串字串，這樣可能會導致渲染可能卡扽，所以我們將使用js提供的功能去實現，其實在Blazor Hybrid為了相容，可以採用js提供的部分功能實現，效果更好，

建立一個Winform專案

示圖：

新增 Microsoft.AspNetCore.Components.WebView.WindowsFormsNuGet包

dotnet add package Microsoft.AspNetCore.Components.WebView.WindowsForms

修改專案檔案的屬性

開啟BlazorHybrid.csproj專案檔案，將Microsoft.NET.Sdk 修改成Microsoft.NET.Sdk.Razor

<Project Sdk="Microsoft.NET.Sdk.Razor">

建立 _Imports.razor檔案，新增以下程式碼

@using Microsoft.AspNetCore.Components.Web
@using Microsoft.AspNetCore.Components.Routing

建立wwwroot資料夾

建立wwwroot/index.html檔案，新增以下程式碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>WinFormsBlazor</title>
    <base href="/" />
    <link href="css/app.css" rel="stylesheet" />
    <link href="WinFormsBlazor.styles.css" rel="stylesheet" />
</head>

<body>

    <div id="app">載入中...</div>

    <div id="blazor-error-ui">
        An unhandled error has occurred.
        <a href="" class="reload">Reload</a>
        <a class="dismiss">