公司对比网站口碑营销案例分析

@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-elseclass="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` 部分的内容。