nuxt图片资源刷新后丢失问题

Question

nuxt3中页面刷新后图片丢失，第一次访问是http的正常显示，刷新后是file访问本地C盘了这个是啥子原因喔

 
这样声明的

 img: new URL("/image/Menstruation4.jpeg", import.meta.url).href,

绑定

<img :src="item.img" style="width: 100%; height: 100%;" />

第一次访问呢的时候正常显示

<img data-v-52f1bf50="" src="http://localhost:3000/image/Menstruation4.jpeg">

刷新之后变成了file协议

<img src="file:///C:/public/image/Menstruation4.jpeg" data-v-52f1bf50="">

图片存放于

Answer 1

【以下回答由 GPT 生成】

问题原因: 出现这种情况的原因是因为在Nuxt3框架中，默认情况下，图片路径是基于路由的。当第一次访问页面时，页面中的图片路径会根据当前的路由进行解析，并正确显示。但是，当刷新页面时，由于浏览器是通过文件协议(file://)来加载页面的，而不是通过HTTP协议来请求服务器资源。因此，在刷新后，浏览器无法正确解析图片路径，导致图片丢失。

可能的解决方案: 1. 使用相对路径: 在Nuxt3框架中，可以使用相对路径来引用图片。相对路径是相对于当前文件所在的目录来解析的。例如，如果图片和组件在同一目录下，可以使用相对路径来引用图片。

<template>
  <img :src="require('@/assets/image.png')" alt="Image">
</template>

1. 使用绝对路径: 可以使用绝对路径来引用图片，确保路径的准确性和唯一性。绝对路径可以是服务器上的绝对路径，也可以是基于根目录的绝对路径。在Nuxt3框架中，可以使用$nuxt对象来获取根目录，然后拼接图片路径。

<template>
  <img :src="`${$nuxt.$rootDir}/assets/image.png`" alt="Image">
</template>

1. 使用require引入图片: 可以使用require函数来引入图片，并将路径作为参数传递给require函数。这样做可以确保在打包时，图片会被正确的打包并引入。例如：

<template>
  <img :src="require('@/assets/image.png')" alt="Image">
</template>

代码片段中图片路径的处理: 在给出的代码片段中，图片路径的处理方式是使用了相对路径的方式进行引用。具体来说，使用了require('@/assets/image.png')来引入图片。这种方式通过@来代表根目录，然后拼接相对路径来引入图片。这样做的好处是可以在不同的组件中共用相同的图片路径，方便管理和维护。

但是，这种处理方式在刷新页面时可能会导致图片丢失的问题，因为刷新后浏览器是通过文件协议来加载页面，无法正确解析图片路径。

为了解决这个问题，可以尝试使用其他的路径处理方式，如使用绝对路径或require函数引入图片。具体的选择取决于项目的需求和具体情况。

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^