jquery 数据表：从 blob 渲染图像 url

Question

我想在数据表列中显示图像。该图像是通过将单元格数据发送到需要 POST 请求和 returns raw/binary png 图像的第 3 方 API 生成的。

在数据表之外工作得很好的是：

// jquery ajax call. data is binary/raw png image
success: function ( data ) {
    var image = document.getElementById(image_tag_id)        
    var url = window.URL || window.webkitURL;
    image.src = url.createObjectURL(data);
}

这是一个以图像标签 ID 和数据作为参数的函数。以前我直接使用标签 (HTMLElement) 但将其更改为 id 以使用数据表 render 功能。

此更改实际上使我想要的理论上的工作（在写这个问题时提出）具有以下渲染功能：

"render": function ( data, type, row, meta ) {
   if (type==="display") {
       var tag_id = "image-" + meta.row;
       getImage(tag_id, data);
       return '<img id="' + tag_id + '">';
   } else {
       return data;
   }
}

但这有一个竞争条件。它假定返回的 html 字符串总是比通过 ajax 调用获取图像更快地生成标签（这可能总是如此，但我不喜欢它）

那么如何更好地解决这个问题呢？让渲染只创建图像标签，然后再做剩下的？

Answer 1

无需在 render 中获取图像，只需创建一个带有 class 集的空图像标签。然后在 drawCallback 函数中，遍历所有生成的图像标签并通过 ajax 调用获取图像。这确保没有竞争条件。

但是我采用了不同的方式并制作了我自己的服务来处理 GET 请求。然后，这允许像通常那样设置图像标签的 src 属性。最重要的是，图片还可以缓存，图片的源数据不需要传输到网页。

jquery 数据表：从 blob 渲染图像 url

jquery datatables: render image from blob url

render

datatables