javascript - 在我的 View 中显示以数组字节为单位的图像

Question

我的目标是:

1. 我将人员的数据加载到发送到我的 View 的模板中。
2. 用户可以修改其数据并点击“提交”。

除了图像之外，几乎所有内容都按其应有的方式运行。 事实上，在我的 Controller 的方法中，我收到了以数组字节为单位的图像，但我不知道如何在我的 View 中显示它。 我在网上找到了一些解释，其中写到我必须使用 URI 方案。

但我不知道如何，因为我的 Controller 在我的代码 js 中发送此数据。 我想说 @Model.Member_Picture 的输入恰好包含“value="System.Byte[]”。

你能告诉我吗？

(我只是发布与图像相关的代码)。

型号

[ContainerDataFor("Picture_gr")] // use the name in your C# model
public byte[] Member_Picture { get; set; }

查看

            <div class="form-check-inline col-xs-6" style="margin-top:2%">
                <img id="ItemPreview" src="" accept="image/png, image/jpeg"/>
            </div>


            <div class="form-check-inline col-xs-6" style="margin-top:2%">
                @Html.LabelFor(model => model.Member_Picture, "Upload Picture", new { htmlAttributes = new { @id = "test" } })
                <input type="file" class="form-control-file" name="file" id="file" value="@Model.Member_Picture">
                <small id="fileHelp" class="form-text text-muted">Maximum 1024kb</small>
            </div>


$(document).ready(function () {
    var img = $('#test').val();
    $('#ItemPreview').attr('src', `data:image/png;base64,${img}`);
});

Answer 1

您不能使用value <input type="file" /> 内的属性渲染图像。您需要使用以下设置将图像渲染为 Base64 字符串:

@{
    var base64Image = Convert.ToBase64String(Model.Member_Picture);
    var source = String.Format("data:image/png;base64,{0}", base64Image);
}

<img src="@source" width="100%" height="100%" />

或者创建另一个字符串属性，如下所示:

public byte[] Member_Picture { get; set; }

public string Image
{
    get
    {
        return String.Format("data:image/png;base64,{0}", Convert.ToBase64String(Member_Picture));
    }
}

并在 View 中显示它:

<img src="@Model.Image" width="100%" height="100%" />