gpt4 book ai didi

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

转载 作者:我是一只小鸟 更新时间:2023-01-10 22:31:40 66 4
gpt4 key购买 nike

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 。

最后此篇关于Maui读取外部文件显示到Blazor中的文章就讲到这里了,如果你想了解更多关于Maui读取外部文件显示到Blazor中的内容请搜索CFSDN的文章或继续浏览相关文章,希望大家以后支持我的博客! 。

66 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com