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 JavaScript 前端开发
SAP UI5 本地开发如何实现 XML 和 JavaScript 代码的自动完成和嵌入式 API 文档自动显示试读版
SAP UI5 本地开发如何实现 XML 和 JavaScript 代码的自动完成和嵌入式 API 文档自动显示试读版
|
XML 自然语言处理 JavaScript
SAP UI5 本地开发如何实现 XML 和 JavaScript 代码的自动完成和嵌入式 API 文档自动显示
SAP UI5 本地开发如何实现 XML 和 JavaScript 代码的自动完成和嵌入式 API 文档自动显示
111 0
|
XML 数据格式
Revit两种外部接口的插件注册文件addin
Revit两种外部接口的插件注册文件addin
|
搜索推荐 C++
QT应用编程: 应用程序的配置保存与恢复
QT应用编程: 应用程序的配置保存与恢复
425 0
|
Web App开发 存储 JSON
本地修改远端 SAP UI5 框架文件的一个小技巧
本地修改远端 SAP UI5 框架文件的一个小技巧
188 0
本地修改远端 SAP UI5 框架文件的一个小技巧
|
Web App开发 JavaScript
SAP UI5库文件的加载细节探讨
SAP UI5库文件的加载细节探讨
SAP UI5库文件的加载细节探讨
|
JavaScript 前端开发
使用Fiddle对浏览器从服务器端接收到的SAP UI5库文件源代码进行修改
Sometimes for trouble shooting or research purpose, you would like to make small changes on framework js file, and test how your application would react to those changes. For example I would like to add a new line for debugging purpose before line 70.
使用Fiddle对浏览器从服务器端接收到的SAP UI5库文件源代码进行修改
|
JavaScript 前端开发 缓存
SharePoint Framework 在web部件中使用已存在的JavaScript库 - 捆绑打包和外部引用
在构建SPFx客户端web部件时,你可以使用公网已有的JavaScript库来构建强大的解决方案。但是在使用的时候你需要考虑你引用的东西没有影响SharePoint页面的性能。
5485 0