前端 - 为什么vue3中img引入的相对路径图片，开发环境中正常显示，vite打包后路径就变成了object?

Question

Answer 1

回答：很奇怪哎，我最多遇到过打包后少了前缀./，而是都是/，导致文件找不到的情况，这种只要配置 base: "./"，然后打包就行了，你这个变成了Object的，还真是少见，你是通过required获取的吗，还是动态设置src属性的呢，有报出什么错误吗

Answer 2

在 Vue 3 中使用 Vite 作为构建工具时，如果你在模板中直接通过相对路径引用图片，并且发现开发环境中图片正常显示，但打包后路径变成了 object，这通常是因为打包工具（如 Vite）在处理资源时，尤其是在生产模式下，会将资源作为模块处理，并返回模块标识符（通常是 import() 调用返回的 Promise 对象），而不是直接的文件路径。

在 Vue 3 的单文件组件（SFC）中，你应该使用 import 语句来引入图片，并在模板中通过计算属性或数据属性来引用它。这样做可以确保 Vite 正确地处理图片资源，并在打包时包含它们。

例如，你可以这样做：

<template>
  <div>
    <img :src="imagePath" alt="My Image">
  </div>
</template>

<script>
import image from './path/to/your/image.png'; // 注意这里的路径应该是相对于当前.vue文件的

export default {
  data() {
    return {
      imagePath: image, // 这里 image 变量是一个模块标识符或解析后的图片 URL
    };
  },
};
</script>

注意，在某些情况下，Vite 会自动将图片路径转换为 URL，但在其他情况下，你可能需要配置 Vite 或使用特定的插件来确保图片被正确处理。

如果你确实想使用相对路径，并且希望它在生产环境中也能正常工作，你可能需要配置 Vite 的 publicDir 和 assetsDir 选项，并确保你的图片放置在这些目录中。这样，Vite 会将这些目录中的文件复制到构建输出的公共目录，并保持它们相对于 index.html 的相对路径。

但总的来说，使用 import 语句来引入图片是更推荐的做法，因为它提供了更好的模块化和打包支持。