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

Question

我的目标是：

1. 我将一个人的数据加载到一个模板中，然后发送到我的视图
2. 用户可以修改他的数据并点击"提交">

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

但我不知道我的控制器是如何在我的代码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

不能在<input type="file" />中使用value属性来渲染图像。您需要使用以下设置将图像渲染为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));
}
}

并在视图中显示：

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

Answer 2

将src更改为src="data:image/png;base64, +data"，其中数据是图像的字节数组

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

示例

<div>
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAAEsBAMAAACLU5NGAAAAG1BMVEUAmf////8fpf9fv/8/sv+f2P/f8v9/zP+/5f8U6SNkAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAC1UlEQVR4nO3Xz0/aYBzH8doW8biOH3IsoswjDJd4bBnuTBez7GjN5nbUxOxMXaL+2fs+T4t92g6ywyO7vF8J7Ye0ha/fp34BxwEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMD/5c5mYRE/njVT02j2vkj+bN5IllwEQdC/1fUlQTAIq6nJl2PBDx1PJD3UkiWtwX3ong9UjA/n7q9ONTUlT3NnlK1UgcF9+C6dVJIt7Uht75bSon4omywy01/c66t6shley+a0W0l2HbyRx1uVxldm2ihTj1A27k0l2dWWQuKlTh0zbXQXOn4vTxMjWeZJWUmo48BMG01Dp6V76uytjGRZSxaxWIPMTEo7L9KLzAsSx9m/0knWv0yWDWXZ8pVQy1Mmfexa76Yr43xXTtnTS63Wv0x2uTdyqxzmeTopk9756v/S8SpLOpZSYz3sHK9jJKv85KF80XhSpmKv2lVp1oWateuqO0ay6OtjcCk7rxg7w9syFVVLu4xmtZ7TXqQKjfRT99BINst6Tr9H28pS7TKa1Xp+7F++flnyeue9rWX5/VF1WIyy5Q7KkrdYbivLidNV9Xyvt5Oy2t2XGzae+LVbXg4HYe2Cu2h9WM6OX+OWV2QOvYyFqEzrw9PsunaBDLr1WOgaybbB5nGqZlY+uwzyQfP649Rxfm7+8NEzK661a3+1iw8f1aC8OW4laWpm1dslDSqaMzSTZV5nyxcbPbNq7ZpOdvHFZl/+3gN9xw5XZtIl65lVa1cqz/TXV1cdLZMtJ+rd3GyiPq/lxd00MpNRXpzv3M9qe6o6Of6mNt1KsmU8ODsaJXokfOrNj5NuNQkv3/lhXlb6e370IVAjwU8vjy6CqJKsOZffUj39lu6XZmryMrlAt8w5SZvJGn/x8svzeNFMTYtFWCR3ETUSAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD4N38AsX524K81XMUAAAAASUVORK5CYII=" alt="Red dot" />
</div>

Answer 3

你可以用香草Javascript这样做：

var fileInput = document.getElementById('img-input');
var demo = document.getElementById('demo');
fileInput.addEventListener('change', function(e) {
var file = fileInput.files[0];
var imageType = /image.*/;
if (file.type.match(imageType)) {
var reader = new FileReader();
reader.onload = function(e) {
demo.src= e.target.result;
}
reader.readAsDataURL(file);
} else {
demo.src = '';
console.log('file not supported');
}
});

#demo {
margin-top: 20px;
}
#img-input {
background-color: #4CAF50;
border: none;
color: white;
text-align: center;
padding: 12px 20px;
display: inline-block;
font-size: 18px;
margin: 20px auto;
cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<input type="file" id="img-input" name="file"></div>
<!-- this is where we display the choosen image //-->
<img id="demo" src="#" alt="your image here" />