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

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

这是一个静态的next应用程序供您参考。它是通过AWS S3桶提供的，但我不认为这是导致这个问题的原因。

编辑:此外，gameImages/box_image.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>