Nuxt App无法从移动设备上的API加载img

Question

我有一个nuxt应用程序，该应用程序连接到API并获取有关电影的信息。在台式机上，它可以正常工作；在移动设备上，它不会加载每部电影的img。我不认为这是API问题，因为通过v-for，创建的卡和API结果一样多。 这是我看到的：

桌面视图：

移动视图：

这是代码：

`

<template>
  <div>
    <div class="scrolling-wrapper">
      <div
        v-for="(m, index) in trendingFilm"
        :key="index"
        class="card mx-2 grow"
      >
        <v-card>
          <a class="white--text">
            <v-img
              height="100%"
              width="185px"
              :src="`https://image.tmdb.org/t/p/w185` + m.poster_path"
            >
              <v-container fill-height fluid class="gradient-overlay">
                <v-layout fill-height>
                  <v-flex xs12 align-center flexbox class="overlay-title">
                    <span class="subheadline">{{ m.title }}</span>
                  </v-flex>
                </v-layout>
              </v-container>
            </v-img>
          </a>

          <v-card-actions class="pa-3">
            <span class="grey--text text--lighten-2 caption mr-2"
              >Vote: {{ m.vote_average }} / 10</span
            >
          </v-card-actions>
        </v-card>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isAMovie: true
    }
  },
  async asyncData({ $axios }) {
    const trendingFilms = await $axios.get(
      'https://api.themoviedb.org/3/trending/movie/day?api_key=MY_API_KEY'
    )
    return {
      trendingFilm: trendingFilms.data.results
    }
  }
}
</script>

<style scoped>
.scrolling-wrapper {
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;
}
.card {
  display: inline-block;
}
</style>

`