html中利用 onerror 事件监听图片加载错误的情况

@error 是 Vue.js 中用于监听 HTML <img> 标签的 error 事件的指令。当浏览器尝试加载图像但失败时（例如，图像 URL 无效、图像不存在或由于网络问题无法加载），会触发 error 事件。

<img v-if="app.logo" 
     :src="app.logo"  
     @error="app.logo=''"  
     alt=""
     class="w-10 h-10 shrink-0 ml-4 rounded-lg object-cover shadow-md ring-2 ring-gray-100 group-hover:ring-blue-100 transition-colors"/>
<div v-else
     class="w-10 h-10 shrink-0 ml-4 rounded-lg object-cover shadow-md ring-2 ring-gray-100 group-hover:ring-blue-100 transition-colors">
    <n-avatar size="large">
        APP
    </n-avatar>
</div>

@error="app.logo=''" 的作用是：一旦图片加载失败（即发生错误），就将 app.logo 设置为空字符串 ''。这样做会使 v-if="app.logo" 条件变为假，从而隐藏 <img> 元素，并显示 v-else 部分的内容，也就是默认的 <n-avatar> 占位符。

详细解释

• :src="app.logo": 绑定图像的 src 属性到 app.logo。这意味着如果 app.logo 包含有效的图像 URL，该图像将会被加载。

• @error="app.logo=''": 这是一个事件绑定语法，表示当图像加载失败时执行指定的表达式。这里，它设置 app.logo 为空字符串。这会导致 v-if="app.logo" 条件不再满足，从而隐藏当前的 <img> 元素并显示 v-else 部分的内容。