在 TypeScript 中检查图片是否存在

5

我有一个使用在线地图瓦片的谷歌地图实现。但是,如果我超出了瓦片区域,它会抛出错误,因为它无法找到这些图像。如何编写if语句,在这些图像不存在时返回null?

我的想法是,因为我包括了jQuery:

$.get(url)
.done(function() { 
  // exists code
  return `http://www.blablabla.com/grey-tiles/${zoom}/${coord.x}/${coord.y}.png`
}).fail(function() { 
    // not exists code
   return null;
})

但是这对我并不起作用。这是我的组件构造函数:

 constructor(){
this.imageMapOptions = {
  getTileUrl: (coord: ImageMapTypeCoord, zoom: number) => {
     return `http://www.blablabla.com/grey-tiles/${zoom}/${coord.x}/${coord.y}.png`
  },
   tileSize: { height: 256, width: 256 },
   maxZoom: 18,
   minZoom: 16,
   radius: 1738000,
   name: 'Beeksebergen'
 };    
}

异步调用无法返回。 - epascarello
1个回答

2
可能会有这样的解决方案:

类似这样的东西可能有效:

var url = 'https://example.com/image.png';
return new Promise((resolve, reject) => {
  return $('<img>')
    .on('error', reject.bind(null, url))
    .on("load", resolve.bind(null, url))
    .appendTo(document.body)
    .css({ "position": "absolute", top: -9999, left: -9999 })
    .on("error load", $.fn.remove)
    .attr("src", url);
});

如何在构造函数中实现这个? - Sireini
@初学者程序员 问题在于你需要返回一个 Promise,然后使用 getTileUrl().done(url => ...)。因为检查 URL 是异步的。 - Andreas Louv
我不明白你的意思。 - Sireini
@初学者程序员 阅读:https://dev59.com/RGYq5IYBdhLWcg3wwDRA - Andreas Louv

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接