我致力于将从数据库中检索到的图像发送到 View 。
我将 byte[]
图像数据转换为字符串并通过 ViewBag
将其发送到 View
图像 src 字符串包含 //
,它转义了字符串的其余部分,并在客户端出错。
如何解决这个问题?
错误:
Controller :
string imgSrc = null;
string base64 = null;
if (viewModel.Image != null)
{
base64 = Convert.ToBase64String(viewModel.Image);
imgSrc = string.Format("data:image/png;base64,{0}", base64);
}
ViewBag.ImageSource = imgSrc;
查看:
@{
var propertyId = Model.PropertyId;
var imageSource = ViewBag.ImageSource;
}
<div id="example" class="k-content">
<div class="demo-section k-content wide">
<div class="wrapper">
<div id="images">
<div class="image">
<img src="@imageSource"/>
</div>
</div>
<div class="dropZoneElement">
<div class="textWrapper">
<p>Add Image</p>
<p class="dropImageHereText">Drop image here to upload</p>
</div>
</div>
</div>
</div>
<input name="files" id="files" type="file" />
<script type="text/x-kendo-template" id="template">
<div class="image"></div>
</script>
<script type="text/javascript">
$(function () {
var template = kendo.template($("#template").html());
var initialFiles = [];
var image = @imageSource;
$("#images").html(kendo.render(template, initialFiles));
$("#images").append('<div class="image"><img src="' + image + '" /></div>');
$("#files").kendoUpload({
async: {
saveUrl: "save?id=" + @propertyId,
removeUrl: "remove",
autoUpload: true
},
multiple: false,
validation: {
allowedExtensions: [".jpg", ".jpeg", ".png", ".bmp", ".gif"]
},
success: onSuccess,
dropZone: ".dropZoneElement"
});
function onSuccess(e) {
if (e.operation == "upload") {
var file = e.files[0].rawFile;
if (file) {
var reader = new FileReader();
reader.onloadend = function () {
$("#images").empty().append("<div class='image'><img src=" + this.result + " /></div>");
};
reader.readAsDataURL(file);
}
}
if (e.operation == "remove") {
$("#images").empty();
}
}
});
</script>
最佳答案
这一行导致了问题:
'<div class="image"><img src=' + @imageSource + ' /></div>'
还有这一行:
var image = @imageSource;
应该是:
var image = "@imageSource";
将其更改为:
'<div class="image"><img src="' + image + '" /></div>'
// Add double quotes ^-------------^
您在图像 src 中添加不带双引号的字符串 image
,因此它变成如下内容:
<img src=some string />
但它应该是这样的:
<img src="some string" />
同时将 @imageSource
更改为 image
您当然可以使用单引号,但需要像这样对它们进行转义:
'<div class="image"><img src=\'' + image + '\' /></div>'
解决方案 2:
只需删除行:
var image = @imageSource;
从您的 javascript 并更改行:
$("#images").append('<div class="image"><img src="' + image + '" /></div>');
到:
$("#images").append('<div class="image"><img src="@imageSource" /></div>');
关于javascript - C# 将图像数据发送到具有破坏图像 src 的双斜杠的 View ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55506452/