Javascript 在我的视图中显示以数组字节为单位的图像

我的目标是：

我将一个人的数据加载到发送到视图的模板中

用户可以修改其数据并单击“提交”

除了图像之外，几乎所有东西都正常工作。 实际上，在我的控制器的方法中，我接收以字节为单位的数组的图像，但我找不到如何在视图中显示它。 我在网上找到了一些关于我必须使用URI方案的解释

但我不知道如何，因为我的控制器在我的代码js中发送这些数据。 我想说带有@Model.Member_图片的输入正好包含“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}`);
});

@LabelFor（model=>model.Member_图片，“上传图片”，新的{htmlAttributes=new{@id=“test”}）
最大1024kb
$（文档）.ready（函数（）{
var img=$（'#test'）.val（）；
$（'ItemPreview'）.attr（'src'，'data:image/png；base64，${img}`）；
});

将您的src更改为

src=“data:image/png；base64，+data“

其中数据是图像的字节数组

<img id="ItemPreview" src="data:image/png;base64, @Model.Member_Picture">

范例

---

将您的src更改为

src=“data:image/png；base64，+data“

其中数据是图像的字节数组

<img id="ItemPreview" src="data:image/png;base64, @Model.Member_Picture">

范例

---

您可以使用香草Javascript这样做：

var fileInput=document.getElementById（'img-input'）；
var demo=document.getElementById（'demo'）；
fileInput.addEventListener（'change'，函数（e）{
var file=fileInput.files[0]；
var imageType=/image.*/；
if（file.type.match（imageType））{
var reader=new FileReader（）；
reader.onload=函数（e）{
demo.src=e.target.result；
}
reader.readAsDataURL（文件）；
}否则{
demo.src=''；
log（“不支持文件”）；
}
})；

#演示{
边缘顶部：20px；
}
#img输入{
背景色：#4CAF50；
边界：无；
颜色：白色；
文本对齐：居中；
填充：12px 20px；
显示：内联块；
字号：18px；
保证金：20px自动；
光标：指针；
}

---

您可以使用香草Javascript这样做：

var fileInput=document.getElementById（'img-input'）；
var demo=document.getElementById（'demo'）；
fileInput.addEventListener（'change'，函数（e）{
var file=fileInput.files[0]；
var imageType=/image.*/；
if（file.type.match（imageType））{
var reader=new FileReader（）；
reader.onload=函数（e）{
demo.src=e.target.result；
}
reader.readAsDataURL（文件）；
}否则{
demo.src=''；
log（“不支持文件”）；
}
})；

#演示{
边缘顶部：20px；
}
#img输入{
背景色：#4CAF50；
边界：无；
颜色：白色；
文本对齐：居中；
填充：12px 20px；
显示：内联块；
字号：18px；
保证金：20px自动；
光标：指针；
}

---

您不能在

中使用

值

属性来渲染图像。您需要使用此设置将图像渲染为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%" />

并在视图中显示它：

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

---

您不能在

中使用

值

属性来渲染图像。您需要使用此设置将图像渲染为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%" />

并在视图中显示它：

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

嗯，您不能像这样设置

，

，因为文件输入意味着选择客户端文件。您需要使用指向保存文件路径的

标记来显示它，或者将字节数组转换为base64字符串，并显示它。Thx以获得帮助。此处的目的是让用户上传另一张图片。I很难，它可以自动加载实际图片，但似乎没有，我将对此进行修改。您不能像这样设置

：

，因为文件输入意味着选择客户端文件。您需要使用指向保存文件路径的

标记来显示它，或者将字节数组转换为base64字符串并改为显示它。谢谢您的帮助。在这里允许用户上载另一张图片。我认为它可以自动加载实际图片，但似乎没有，我将修改它。感谢您的回答！我的实际问题是如何获得值，如您的示例中所示？因为@Model.Member_图片仅包含System.Byte[]。我应该创建一个新变量来转换Base64中数组的字节并显示它吗？@Korpin replace for stringbase64 on c#是一个字符串，您也可以在这里阅读更多内容，谢谢您的回答！我的实际问题是如何获得值，就像您的示例中一样？因为@Model.Member_图片只包含System.Byte[]。我应该创建一个新变量来转换Base64中数组的字节并显示它吗？@Korpin replace for stringbase64 on c#是一个字符串，您也可以在这里阅读更多内容是的，我所做的是创建另一个变量并转换Base64String中数组的字节，但它不起作用！我想当用户想要更新图片时，我也必须这样做？Whic您想要更新该图片的方法（使用普通表单提交或AJAX）？如果你想使用AJAX，那么

标签应该放在部分视图中，并从返回部分视图的控制器操作中更新它，否则正常表单提交应该在重新加载后更改它。是的，我想用正常表单来做。感谢提供的信息，我将阅读如何创建它！是的，我所做的是创建另一个变量然后将数组的字节转换为Base64String，这样就不起作用了！我想当用户想更新图片时，我也必须这样做？你想用哪种方法更新图片（使用普通表单提交或AJAX）？如果你想使用AJAX，那么

标记应该放在局部视图中