Question

我的目标是：

我将一个人的数据加载到发送到视图的模板中。
用户可以修改其数据，然后单击“提交”。

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

但是我不知道怎么办，因为我的控制器在我的代码js中发送了这些数据。我想说的是@ Model.Member_Picture的输入正好包含“ value =“ System.Byte []””。

你能启发我吗？

（我只是发布与图片相关的代码）。

模型

map

查看

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

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));
    }
}

并在视图中显示它：

<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" />

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

3 个答案: