Vue中v-if判断无效？如何仅加载存在的thumbnail.url图片？

核心问题 #

你当前的v-if="blog.thumbnail"仅判断了thumbnail对象是否存在，但如果API返回的thumbnail是空对象（比如{"thumbnail": {}}），或者thumbnail存在但url字段为空/undefined，这个判断会通过，导致无效的src绑定逻辑执行。

修复代码 #

基础修复（推荐） #

在v-if中同时校验thumbnail和thumbnail.url的存在性：

<img v-if="blog.thumbnail && blog.thumbnail.url" :src='backendurl+blog.thumbnail.url'>

严谨版（排除空字符串URL） #

如果需要避免url为空字符串的情况，可增加字符串非空校验：

<img v-if="blog.thumbnail && typeof blog.thumbnail.url === 'string' && blog.thumbnail.url.trim()" :src='backendurl+blog.thumbnail.url'>

Vue 3/支持可选链的场景 #

若项目基于Vue 3，或通过Babel配置支持了可选链操作符，可简化判断逻辑：

<img v-if="blog.thumbnail?.url" :src='backendurl+blog.thumbnail.url'>

调试验证 #

可以临时在模板中添加调试代码，确认每个博客的thumbnail结构：

<!-- 调试用，上线前删除 -->
<div v-for="blog in blogs" :key="blog.id">
  {{ JSON.stringify(blog.thumbnail) }}
</div>

通过输出的JSON结构，就能明确哪些博客的thumbnail存在但url无效，验证修复逻辑是否生效。

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