Maui 读取外部文件显示到Blazor中

简介: Maui 读取外部文件显示到Blazor中

Maui 读取外部文件显示到Blazor中

首先在maui blazor中无法直接读取外部文件显示 ,但是可以通过base64去显示 但是由于base64太长可能影响界面卡顿

这个时候我们可以使用blob链接去加载外部图片 它不需要copy文件到wwwroot中 它会将byte转换一个url供blaozr去读取

来看实现 :

首先第一步在wwwroot中的index.html添加一个js方法 用来将byte转换blob链接 将以下方法复制进去

    <script>
        /**
         * 将图片字节数组转换blob url
         */
        function imgToLink(blob) {
   
   
            var myBlob = new Blob([blob], {
   
    type: "image/png" });
            return (window.URL || window.webkitURL || window || {
   
   }).createObjectURL(myBlob);
        }

    </script>

如何我们在Index.razor中添加以下代码

@page "/"
@inject IJSRuntime JS

<img src="@url" height="200px" width="200"/>

@code
{
   
   
    private string url;
    protected override async Task OnInitializedAsync()
    {
   
   
        // 放在项目目录下的logo.png会被打包到cache文件夹中 这里你也可以放外部文件链接 但是你需要保证再读取前有读取权限负责会报错
        var logo = Path.Combine(FileSystem.CacheDirectory, "logo.png");
        // 读取转换byte[]
        var data = await File.ReadAllBytesAsync(logo);
        // 通过js转换blob链接
        url = await JS.InvokeAsync<string>("imgToLink", data);
        await base.OnInitializedAsync();
    }
}

完成以后我们将图片添加到项目中!

修改图片属性为始终复制:

然后我们将程序直接执行

效果如图

这种效果比转base64更好不会再界面残留太多字符串 推荐使用,如果你有更好的办法请推荐给我

示例代码:gitee github

来着token的分享
微信交流群:

技术交流群:737776595

目录
相关文章
|
XML 编解码 C#
.NET MAUI 安卓 UI 资源设置
本文主要介绍使用 MAUI 开发安卓应用时,如何更换和处理 UI 资源:应用名称,图标,主题配色,状态栏,闪屏。
670 0
.NET MAUI 安卓 UI 资源设置
|
开发框架 前端开发 JavaScript
疯狂吐槽 MAUI 以及 MAUI 入坑知识点
窗口 窗口管理 如何限制一次只能打开一个程序 MAUI 程序安装模式 为 MAUI Blazor 设置语言 坑 ① 坑 ② 坑 ③ 配置 MAUI 项目使用管理员权限启动 问题背景 定制编译过程 MAUI 实现前后端分离开发 背景 先搞前端 创建 MAUI Blazor 项目 C# 自动化生成证书、本地安装证书、解决信任证书问题 背景 写代码 在 ASP.NET Core 中使用
2317 0
|
6月前
|
开发框架 前端开发 C#
从零开始学 Blazor 创建 Web 应用,入门指南超详细!带你轻松开启精彩的开发之旅!
【8月更文挑战第31天】在互联网时代,Web应用开发愈发重要,Blazor作为新兴框架,允许使用C#和.NET技术构建交互式Web应用,提高开发效率与代码可维护性。本文将从零开始引导读者了解Blazor的基本概念,安装设置步骤,项目创建及运行方法。通过简单的示例介绍Blazor的基本结构,包括Pages、Shared等文件夹用途,以及Program.cs文件的功能。同时,还将演示如何创建Razor页面和组件,实现数据绑定与事件处理,帮助读者快速入门Blazor开发。
489 0
|
JavaScript C# Android开发
Maui Blazor 使用摄像头实现
Maui Blazor 使用摄像头实现
241 0
|
5月前
|
存储 开发工具 Android开发
使用.NET MAUI开发第一个安卓APP
【9月更文挑战第24天】使用.NET MAUI开发首个安卓APP需完成以下步骤:首先,安装Visual Studio 2022并勾选“.NET Multi-platform App UI development”工作负载;接着,安装Android SDK。然后,创建新项目时选择“.NET Multi-platform App (MAUI)”模板,并仅针对Android平台进行配置。了解项目结构,包括`.csproj`配置文件、`Properties`配置文件夹、平台特定代码及共享代码等。
458 2
获取apk的签名信息
在接入第三方功能时,经常要注册提交apk的签名信息 (sha1签名)?,下面列出相关步骤。 获取apk签名信息的步骤: 1)修改apk后缀名为zip,解压得到其中的META-INF文件夹; 2)把META-INF文件夹放到C盘根目录下; 3)在dos面板中,  敲入命令:  keytool -printcert -file C:\META-INF\CERT.
5407 0
|
域名解析 弹性计算 运维
【运维】阿里云宝塔面板域名DNS解析(如何配置用域名访问网站)
【运维】阿里云宝塔面板域名DNS解析(如何配置用域名访问网站)
4175 0
【运维】阿里云宝塔面板域名DNS解析(如何配置用域名访问网站)
|
C# Windows
WPF实现抽屉效果
原文:WPF实现抽屉效果 界面代码(xaml): ...
1575 0
|
Android开发
autojs自定义组件
牙叔教程 简单易懂
825 0
|
测试技术
西门子S7-200 SMART自由口通信,如何编写发送程序,使用超级终端发送测试
今天我们学习编写西门子S7-200 SMART自由口通信的发送程序,并使用超级终端进行发送功能测试。首先设置参数,打开STEP7 Micro/WIN SMART编程软件,右键单击项目树中的CPU,选择打开,在打开的系统块中选择CPU类型和信号板类型。设置信号板,串口的类型为RS232,地址为2,波特率为9600。
西门子S7-200 SMART自由口通信,如何编写发送程序,使用超级终端发送测试

热门文章

最新文章