如何根据img元素加载状态控制对应下载段落的显示与隐藏

方法1：原生JS内联实现（无需修改框架逻辑，直接改现有代码即可） #

先给下载提示的p标签加id、设置默认隐藏，再修改img标签的事件逻辑即可，修改后完整代码如下：

<img 
  src={{this.vac-card.vac_card_url}} 
  alt="vac-card.png" 
  id="vac-card-image"
  onload="document.getElementById('vac-download-tip').style.display = 'none'"
  onerror="this.style.display='none'; document.getElementById('vac-download-tip').style.display = 'block'"
>

<p id="vac-download-tip" style="display: none">
  <a href={{url}} target="_blank">Click here to download.</a>
</p>

逻辑说明：

• 给p标签设置默认隐藏，避免页面初始化时还没加载完图片就出现提示闪烁
• 图片加载成功触发onload事件时，主动隐藏下载提示
• 图片加载失败触发onerror事件时，同步控制下载提示显示

方法2：前端框架响应式状态实现（适配你当前用的带模板语法的框架，代码更易维护） #

从你贴的{{this.xxx}}模板语法来看，你用的是带响应式状态的前端框架，可以用状态变量控制元素显隐，避免内联JS：

1. 组件内定义响应式变量isImgLoadError，默认值为false
2. 模板绑定状态逻辑即可：

<img 
  src={{this.vac-card.vac_card_url}} 
  alt="vac-card.png" 
  id="vac-card-image"
  {{on "load" (fn (set this "isImgLoadError") false)}}
  {{on "error" (fn (set this "isImgLoadError") true)}}
  style={{if this.isImgLoadError "display: none"}}
>

{{#if this.isImgLoadError}}
<p>
  <a href={{url}} target="_blank">Click here to download.</a>
</p>
{{/if}}

内容的提问来源于stack exchange，提问作者nortonbreads