我正在构建一个Web应用程序,它是静态船舶信息的目录,我从不同的来源收集数据。其中之一是https://www.marinetraffic.com/,我也使用此源来检索飞船的图像。检索图像非常简单:
<img src="https://photos.marinetraffic.com/ais/showphoto.aspx?mmsi=273914200>
这将加载此图像:
注意url中的 mmsi 部分,这是船只可以拥有的一个标识符,问题是船只可以具有多个标识符,所以还有imo编号,callSign和eni编号。在https://photos.marinetraffic.com/上,可以同时搜索imo或mmsi号上的船以检索图像。
所以这个<img src="https://photos.marinetraffic.com/ais/showphoto.aspx?imo=6600553">
返回相同的图像:
对于这艘特定的船,我的数据库中有两个标识符,但是也有船,只有一个标识符。例如,当我想检索图像时,我的飞船仅具有imo编号7361518,我尝试这样做:
<img src="https://photos.marinetraffic.com/ais/showphoto.aspx?mmsi=7361518"
但这会返回404错误。
目前,我已通过以下方法解决了该问题:
<img width="100%" height="100%" src={`https://photos.marinetraffic.com/ais/showphoto.aspx?mmsi={id}`}/>
<img width="100%" height="100%" src=`https://photos.marinetraffic.com/ais/showphoto.aspx?imo={id}`}/>
因此,我将两个图像标签放置在彼此上方,将ship id值传递给url,该id可以是imo或mmsi编号,这将导致图像无法加载。
请注意位于底部的未加载图标,我想一些解决方法,但无法弄清楚该怎么做:
因此,在对案例研究进行了整体解释之后,一个真实的场景和图像问题,有人知道我的任何解决方案都可以实现吗?或者对此问题有其他解决方案?