VueJS：如果图像不存在，则不显示 div答案

【问题标题】：VueJS: Do not show div if image doesn't existVueJS：如果图像不存在，则不显示 div
【发布时间】：2020-10-24 15:15:29
【问题描述】：

我正在渲染一些 div，当图像不存在时我不想显示 div。

我在想这样的事情：

<div v-show="twItem.imageurl">{{twItem.title}}</div>

但它不起作用。任何帮助将不胜感激。

【问题讨论】：

可能是因为您的组件渲染速度比您将图像数据传递给twItem 更快，在这种情况下，您可以将twItem 定义为object 类似这样的twItem: {}
@DevCl9 当我使用 v-if 时没有错误，但它不起作用。
'is not there'表示url字符串是空字符串还是404图片的url链接？
@dunhuang 当我点击链接clips-media-assets2.twitch.tv/…时，我得到了拒绝访问，所以应该是拒绝访问。

【解决方案1】：

这个任务不是原始的。

不管你用v-if还是v-show，都比较同一个东西，但结果不同。 v-if="false" 根本不会渲染元素，而 v-show="false" 将渲染它，但隐藏。 (display: none;)

这里的问题是，您只需检查 twItem.imageurl 是否已设置，而不是图像是否已加载。

你可以做的是使用@load：

<template>
  <div v-if="twItem.loaded">{{ twItem.title }}</div>
  <image :src="twItem.imageurl" @load="twItem.loaded = true">
</template>

【讨论】：

【解决方案2】：

使用v-if 代替v-show。

<div v-if="twItem.imageurl">{{ twItem.title }}</div>

【讨论】：