Vue3+Vite项目导入图片报错：未配置.png文件加载器

问题原因 #

Vite默认内置了图片、SVG等静态资源的处理能力，不需要像Webpack那样配置loader。你遇到的No loader is configured错误大概率是导入路径错误导致Vite无法找到目标文件，错误提示存在误导性。

解决方案 #

1. 修正导入路径 #

你已经配置了@别名指向./src，优先用别名导入资源；也可以根据当前文件位置使用正确的相对路径：

• 使用别名（推荐）：

  import x from '@/assets/my/path/to/image.png'
  

• 使用相对路径（比如当前文件在src/components目录下）：

  import x from '../assets/my/path/to/image.png'
  

你之前写的./src/assets/...属于错误的相对路径写法——在src内部的文件中，Vite会从当前文件所在目录出发寻找./src文件夹，而该文件夹并不存在，导致路径解析失败。

2. 验证路径正确性 #

可以通过以下方式确认路径无误：

• 核对项目目录结构，确保src/assets/my/path/to/image.png文件真实存在
• 在编辑器中按住Ctrl（Windows）/Cmd（Mac）点击导入路径，检查是否能跳转到目标图片文件

补充说明 #

Vite对静态资源的默认处理规则：

• 当资源文件大小小于assetsInlineLimit（默认4KB）时，会被编译为base64格式嵌入代码
• 超过阈值时，会生成单独的资源文件，并返回其编译后的URL

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