Vite+React项目图片无法显示？教你正确引入图片的方法

AI 小北

2026-7-1

Vite + React 图片加载失败解决方案

以下是几种可行的解决办法，按推荐优先级排序：

导入式引用（官方推荐）
在React组件中先导入图片资源，再通过变量引用，Vite会自动处理资源打包和路径映射：
```
import logo from './assets/images/logo.svg';

function App() {
  return <img src={logo} alt="网站logo" />;
}

export default App;
```
核对相对路径准确性
如果直接使用字符串路径，要确保路径是相对于当前组件文件的正确层级。比如你的组件在src/pages/Home.jsx，那么引用src/assets/images/logo.svg的路径应该是../assets/images/logo.svg。另外注意Vite对路径大小写敏感，文件名和目录名的大小写必须和实际文件一致。

确认资源被Vite识别
SVG属于Vite默认支持的资源类型，若有特殊场景可在vite.config.js中显式声明：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  assetsInclude: ['**/*.svg']
});