将Base64字符串分配给javascript中的图像

Question

我已经在一个基本问题上浪费了很多时间，我有一个.cshtml剃刀视图，该视图具有DataTable类型的模型，此数据表具有一些TableRows，其中的一列存储一个图像字节数组。 如何将此模型值分配给视图中的图像元素。 到目前为止，这就是我提出的内容。

 var binaryData = @Convert.ToBase64String(Model.Rows[0][0] as Byte[]);
    var img = document.getElementById('ImgEle')
                      .setAttribute('src', "data:image/jpg;base64," + binaryData);

我在Chrome控制台窗口中收到此错误： Uncaught SyntaxError: Invalid regular expression flags

我该如何解决这个问题？

编辑：

感谢@hiltononline回答，这是我最终得到的代码，并且可以正常工作

var binaryData='@Convert.ToBase64String(Model.Rows[0][0] as Byte[])';
var img = document.getElementById("ImgEle");
img.setAttribute("src", "data:image/jpg;base64," + binaryData);

希望这会帮助到别人。

Answer 1

binaryData的值需要用单引号引起来，以将其视为字符串：

var binaryData='@Convert.ToBase64String(Model.Rows[0][0] as Byte[])';

一种替代方法是直接将模型值插入setAttribute方法中：

var img = document.getElementById("ImgEle");
img.setAttribute("src", "data:image/jpg;base64,@Convert.ToBase64String(Model.Rows[0][0] as Byte[])");

此外，根据数据的存储方式，可能无需再次对其进行解码。 您可以使用在线解码器（例如CodeBeautify的base64-to-image-converter）仔细检查字节数组是否有效

Answer 2

我只知道如何在javascript中将base64图像字符串显示为标记，因此，如果您的错误仅在此级别，那就是个好消息—否则，第一行（ binaryData ）确实无法为您提供帮助：

var binaryData = @Convert.ToBase64String(Model.Rows[0][0] as Byte[]);
var img = document.getElementById("ImgEle");
img.setAttribute("src", "data:image/jpg;base64," + binaryData);

我认为您只是忘记了要使用setAttribute设置的属性（ src ）的名称，而把img变量分配弄乱了。