如何用替代图像替换HTML图像?

时间:2018-11-14 14:27:31

标签: html image

我正在构建一个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编号,这将导致图像无法加载。

这将导致如下结果: enter image description here

请注意位于底部的未加载图标,我想一些解决方法,但无法弄清楚该怎么做:

  1. 检查HTTP状态代码,然后显示图像
  2. 当舰船未加载彩信且回退到imo时显示备用图片
  3. 删除未加载图像图标,以使图像无结果时不可见。

因此,在对案例研究进行了整体解释之后,一个真实的场景和图像问题,有人知道我的任何解决方案都可以实现吗?或者对此问题有其他解决方案?

0 个答案:

没有答案