时间戳

首页 > 解决方案 > C# 发送图像数据以查看具有破坏图像 src 的双斜杠

javascript - C# 发送图像数据以查看具有破坏图像 src 的双斜杠

问题描述

我致力于将从数据库中检索到的图像发送到视图。

我将byte[]图像数据转换为字符串并通过ViewBag

图像 src 字符串包含//转义字符串的其余部分，并在客户端出错。

如何解决这个问题呢？

错误：

在此处输入图像描述 在此处输入图像描述

控制器：

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>

标签： javascriptc#jqueryasp.net-mvcimage

解决方案

此行导致问题：

'<div class="image"><img src=' + @imageSource + ' /></div>'

还有这一行：

var image = @imageSource;

应该：

var image = "@imageSource";

将其更改为：

'<div class="image"><img src="' + image + '" /></div>'
// Add double quotes         ^-------------^

您image在图像 src 中添加不带双引号的字符串，所以它变成了这样：

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

推荐阅读