NuxtJS静态站点刷新后图片损坏 跳转返回才正常如何修复

• 你存放在static目录下的资源，引用时使用了不带根路径前缀的相对路径gameImages/box_image.png，浏览器解析相对路径时会以当前页面的URL作为基准：
  • 刷新页面时，浏览器直接从服务端加载HTML，如果当前页面URL不是站点根路径（比如位于/games/list），会将图片路径拼接为当前URL/gameImages/box_image.png，对应资源不存在，导致图片加载失败
  • 客户端路由跳转（从其他页面返回当前页）时，Nuxt的上下文默认以站点根为路径基准，相对路径会被正确解析到static目录下的资源，因此图片可以正常加载
• 你通过Nuxt Content模块读取的路径是纯字符串，没有经过webpack的资源处理逻辑，不会自动转换为绝对路径，因此路径解析规则完全遵循浏览器原生逻辑

方案1：直接修改内容标记文件的路径 #

将所有内容标记文件中boxImage字段的路径前添加根路径斜杠/，示例：

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

该方案无需修改业务代码，适用性最强。

方案2：模板层统一拼接根路径 #

如果不想批量修改所有内容标记文件，可以直接修改图片的src属性，强制拼接根路径前缀：

<template>
  <NuxtLink :to="game.pageName">
    <img :src="`/${game.boxImage}`" :height="gamePanelHeight" class="elevation-4" alt="游戏封面" />
  </NuxtLink>
</template>

如果部分boxImage字段本身已经带有/前缀，需要先做去重处理，避免出现//gameImages/xxx.png的错误路径。

内容的提问来源于stack exchange，提问作者hipsterstomper69