一些NuxtJS图像在重新加载时会中断

Question

在我的网站上，我有一系列的图片作为游戏页面的链接：

<template>
  <NuxtLink :to="game.pageName">
    <img :src="game.boxImage" :height="gamePanelHeight" class="elevation-4"
  /></NuxtLink>
</template>

这些链接中的每一个都从如下内容标记文件中提取其属性：

index: 3
boxImage: gameImages/box_image.png
title: game title
pageName: games/whatever

它们像这样被加载到页面中：

<script>
export default {
  async asyncData({ $content, params }) {
    const games = await $content('games').sortBy('index', 'asc').fetch()
    return { games }
  },
}
</script>

每当我刷新这个页面。所有这些图像都会中断，直到我在页面外导航并返回。是什么引起了这个问题，我该如何解决呢？

这是一个静态的Nuxt应用程序FYI。它是通过AWS S3桶提供的，但我不认为这是造成这个问题的原因。

编辑：也是来自静态文件夹的gameImages/boxImage.png中的boxImage。

Answer 1

asyncData不是在到达URL或使用重新加载(F5)时触发的钩子，它只在导航期间触发。

如果您希望它在重新加载之后也能工作，请使用fetch()钩子。

更多信息在这里：https://nuxtjs.org/docs/2.x/components-glossary/pages-fetch#options

编辑如何用fetch()编写它

<script>
export default {
  data() {
    return {
      games: [],
    }
  },
  async fetch() {
    this.games = await this.$content('games').sortBy('index', 'asc').fetch()
  },
}
</script>