Uncaught (in promise) TypeError: Cannot read properties of null (reading 'path')答案

【问题标题】：Uncaught (in promise) TypeError: Cannot read properties of null (reading 'path')Uncaught (in promise) TypeError: Cannot read properties of null (reading 'path')
【发布时间】：2021-12-21 03:34:41
【问题描述】：

我的图像没有显示，并且我从标题中得到错误。这是我的代码：

<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 路径作为道具

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

一切都没有图像，所以我的 get 请求和 v-for 有效，只有 theme.image.path 不起作用，我不知道为什么，我使用 vue 和 ionic

【问题讨论】：

theme.image 似乎没有为至少一个元素定义。你能console.log(this.themes)或console.log(response.data.data)吗？
@oshell 我有一个由 17 个对象组成的数组，我发现其中一些对象确实没有图像，但是如何显示具有路径的图像？那个 api 不是我的，所以我不能改变它
您可以简单地传递空字符串，但这可能会显示损坏的图像。所以通常你想使用v-if添加额外的检查。我为它添加了一个答案。

标签： vue.js ionic-framework

【解决方案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" />

【讨论】：

【解决方案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>

【讨论】：