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

目录
相关文章
|
6月前
|
JavaScript Linux C#
【傻瓜级JS-DLL-WINCC-PLC交互】1.C#用windows窗体控件创建.net控件
【傻瓜级JS-DLL-WINCC-PLC交互】1.C#用windows窗体控件创建.net控件
143 0
|
6月前
|
JavaScript C# Windows
【傻瓜级JS-DLL-WINCC-PLC交互】4.DLL读取WINCC内部变量
【傻瓜级JS-DLL-WINCC-PLC交互】4.DLL读取WINCC内部变量
201 0
WPF界面无法正常显示(资源引用,如转换器),但程序正常运行
WPF界面无法正常显示(资源引用,如转换器),但程序正常运行
WPF界面无法正常显示(资源引用,如转换器),但程序正常运行
|
Web App开发
【视频】自然框架之分页控件的使用方法(二) 下载、DLL说明和web.config的设置
    上次说的是QuickPager分页控件的PostBack的使用方式,也提供了源码下载。但是有些人下载之后发现有一大堆的文件夹,还有一大堆的DLL,到底要用哪个呀?不会都要用吧。     当然不需要全都引用了,只需要引用三个DLL就可以了。
1103 0
|
JavaScript 前端开发 C++
COM组件开发实践(七)---多线程ActiveX控件和自动调整ActiveX控件大小(上)
声明:本文代码基于CodeProject的文章《A Complete ActiveX Web Control Tutorial》修改而来,因此同样遵循Code Project Open License (CPOL)。
867 0
|
JavaScript 前端开发 缓存
SharePoint Framework 在web部件中使用已存在的JavaScript库 - 捆绑打包和外部引用
在构建SPFx客户端web部件时,你可以使用公网已有的JavaScript库来构建强大的解决方案。但是在使用的时候你需要考虑你引用的东西没有影响SharePoint页面的性能。
5489 0