Question

我想在表中附加一个二进制格式的图像。数据是动态的，取决于所选项目。目前，我已经实现了这一点。

var notes = _jobMgr.GetNotes(transportLegId)
                .Select(a => new
                {
                    date = a.N_Date.ToString(),
                    note = a.N_Note,
                    image = a.Images.FirstOrDefault().I_Image
                });

            return Json(notes);

但是，如果该笔记没有图像，它将出现错误。如果没有图像，请问如何在不影响返回数据的情况下获取图像。

在JQuery端，我已经实现了它来显示数据。

for (var i = 0, len = data.length; i < len; i++) {
                var img = document.createElement('img');
                img.src = "data:image/jpeg;base64," + btoa(data[i].image);
                var noteRow = "<tr><td>" + data[i].date + "</td><td>" + data[i].note + "</td><td>" + img + "</td></tr>";
                $('#note-tbody').append(noteRow);
            }

我想知道为什么图像不显示而是显示文本[object HTMLImageElement]

预先感谢您的帮助。

Answer 1

您问了两个问题（我想），所以我看看是否可以同时打这两个问题：

请问如果没有图像，还如何在不影响返回数据的情况下获取图像。

您的意思是C＃中的错误吗？您可以使用null conditional operator：

image = a.Images?.FirstOrDefault()?.I_Image

如果image = null或Images为FirstOrDefault()，则会设置null，而不是引发异常。

您可以在JavaScript中使用ternary operator来解决这个问题，如果有图片，我们将在其中使用图片，否则我们将只使用一个空字符串。这也将解决您的第二个问题，因为您将以string而不是object的形式创建元素。

for (var i = 0, len = data.length; i < len; i++) {
    var img = data[i].image ? `<img src="data:image/jpeg;base64,${btoa(data[i].image)}">` : "";
    var noteRow = "<tr><td>" + data[i].date + "</td><td>" + data[i].note + "</td><td>" + img + "</td></tr>";
    $('#note-tbody').append(noteRow);
}

我想知道为什么图像不显示而是显示文本[object HTMLImageElement]

您的img变量不是string，而是object，因此您不能以这种方式将其串联。

将来，如果您想从元素对象中获取HTML字符串，则可以使用outerHTML。

Answer 2

我认为它可行。

 var noteRow = "<tr><td>" + data[i].date + "</td><td>" + data[i].note + "</td><td>" <img src="+img.src+" /></td></tr>";

将二进制数据作为图像显示到JQuery中的表中

2 个答案: