从rowcallback函数数据表调用函数

Question

这就是我想要做的：

1. 从某个img单元格中获取所有td标签。
2. 遍历img集合：检查是否有图像loads(exists)。
3. 如果图像不存在，请将图像的src属性设置为default src。

脚本：

var default_img = "{{URL::to('/images/default-product-img.jpg')}}";
.
.
.

            fnRowCallback: function(nRow, aData, iDisplayIndex, iDisplayIndexFull) {                
                var s_images = $(nRow).find('td:eq(1) img');
                var m_images = $(nRow).find('td:eq(2) img');
                var u_images = $(nRow).find('td:eq(3) img');

                s_images.each(function(index, element) {
                    let url = $(this).attr('src');
                    imageExists(url, function(exists) {
                        if(!exists) {
                            $(this).attr({'src': default_img, 'data-exists': exists});
                        }
                    });
                });                  
            },

此link中的函数：

   function imageExists(url, callback) {
      var img = new Image();
      img.onload = function() { callback(true); };
      img.onerror = function() { callback(false); };
      img.src = url;
    }

但是图像仍然没有加载，甚至没有加载默认图像。我为测试目的添加的data-exists属性都没有设置。

例如我正在使用的url是：

https://cdn.shopify.com/s/files/1/0020/4433/0057/products/0fc643cb997ee029b87b72ea84b2f9c6.jpg?v=1542290204

JSFiddle：https://jsfiddle.net/3smx18o6/1/

我在这里想念什么？应该如何从callback函数中调用函数？