Question

未捕获（在承诺中）TypeError：无法读取 null 的属性（读取“路径”）

2021-11-08

12084

vue.js ionic-framework

我的图片没有显示，并且标题出现错误。这是我的代码：

<theme-card
  v-for="theme in themes"
  :router-link="`/theme/${theme.slug}`"
  :key="theme.id"
  :name="theme.name"
  :tags="theme.tags"
  :id="theme.id"
  :imgPath="theme.image.path"
></theme-card>

这是我的获取请求

async getThemes() {
  await axios.get('api')
             .then((response) => (this.themes = response.data.data))
},

然后在已安装中：

async mounted() {
  await this.getThemes()
}

在主题卡中，我收到 img 路径作为 prop

<img :src="`${imgPath}`" alt="theme-img" height="80" />

没有图片一切都正常，所以我的获取请求和 v-for 有效，只有 theme.image.path 无效，我不知道为什么，我使用的是 vue 和 ionic

Answer 1

似乎有些情况下 theme.image 未定义。若要继续显示列表，只需使用：

<theme-card
    v-for="theme in themes"
    :router-link="`/theme/${theme.slug}`"
    :key="theme.id"
    :name="theme.name"
    :tags="theme.tags"
    :id="theme.id"
    :image="theme.image"
></theme-card>

然后使用 v-if 有条件地显示图像

<img v-if="image" :src="`${image.path}`" alt="theme-img" height="80" />

Answer 2

如果要仅显示具有路径的图像，您可以尝试以下代码

<theme-card
    v-for="theme in themes"
    :router-link="`/theme/${theme.slug}`"
    :key="theme.id"
    :name="theme.name"
    :tags="theme.tags"
    :id="theme.id"
    :imgPath="theme.image? theme.image.path : ''"
></theme-card>