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

Question

我的图片没有显示，而且标题有误。这是我的代码：

<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

Answer 1

只显示有路径的图片，可以试试下面的代码

<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>

Answer 2

似乎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" />

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

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

ionic-framework

vue.js