Vue.js项目Vite构建PNG图片导入解析错误求助

错误原因解析 #

1. 第一种错误（二进制解析乱码）：直接在<img>的src中写相对路径引用assets下的图片时，Vite错误地将二进制图片文件当作可解析的文本模块（如JS/Vue文件）处理，导致解析二进制内容时抛出语法错误。
2. 第二种错误（Rollup解析失败）：将图片移至public目录后，Vite仍尝试把根路径的图片当作模块导入解析，但public目录下的文件是直接复制到构建产物根目录的静态资源，不需要经过Rollup的模块解析流程。

解决方案 #

方案1：使用assets目录的标准写法 #

在Vue组件中，通过ES模块导入图片资源，或者使用Vite支持的别名路径：

方式A：ES模块导入

<script setup>
// 导入图片资源，Vite会自动处理路径和资源构建
import loginImg from '../assets/img/loginSignUpForms/Login.PNG'
</script>

<template>
  <img
    class="h-full w-full object-cover"
    :src="loginImg"
    alt="登录页面配图"
  />
</template>

方式B：使用@别名（推荐）

先在vite.config.js中配置@指向src目录，避免层级错误：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src')
    }
  }
})

然后在模板中直接使用别名路径：

<img
  class="h-full w-full object-cover"
  src="@/assets/img/loginSignUpForms/Login.PNG"
  alt="登录页面配图"
/>

方案2：使用public目录的正确写法 #

如果要放在public目录，需遵循以下规则：

1. 确保图片直接放在项目根目录的public文件夹下（例如public/Login.PNG），如果有子文件夹，路径要对应（如public/img/Login.PNG则用/img/Login.PNG）。
2. 模板中直接使用根路径引用，无需任何导入：

<div name="left" class="w-[100%] lg:w-[50%]">
  <img class="h-full w-full object-cover" src="/Login.PNG" alt="登录页面配图" />
</div>

额外排查点 #

• 检查图片文件名的大小写：Windows系统不区分大小写，但构建环境（如Linux）会严格区分，确保代码中的路径和实际文件名完全一致。
• 验证图片文件是否损坏：尝试用图片查看器打开图片，确认文件本身无问题。

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