Vite.js无法渲染Django后端API返回的图片问题排查

文字数据正常展示说明API接口通信没问题，图片加载失败核心原因是媒体文件的访问路径配置错误，涉及Django媒体服务配置、Vite代理规则以及前端路径拼接三个环节，以下是针对性解决方案：

一、配置Django媒体文件服务 #

Django的ImageField存储的文件需要通过特定路径访问，先确保后端配置正确：

1. 在项目settings.py中添加媒体文件配置：

import os

MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

2. 在项目主urls.py中添加媒体文件路由（仅开发环境适用，生产环境需用Nginx托管）：

from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [
    # 你的其他业务路由
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

二、修正Vite代理配置 #

你的vite.config.js仅代理了/api路径，但媒体文件通过/media路径访问，需要新增代理规则：

修改后的vite.config.js：

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

export default defineConfig({
  plugins: [react()],
  server: {
    proxy: {
      "/api": {
        target: "http://127.0.0.1:8000",
        changeOrigin: true,
        secure: false,
      },
      // 新增媒体文件代理
      "/media": {
        target: "http://127.0.0.1:8000",
        changeOrigin: true,
        secure: false,
      },
    },
    // 移除不必要的base配置，避免路径冲突
    // base: "/static/",
  },
});

三、修正前端图片路径拼接 #

Django返回的thumbnail_image是相对路径（如restaurants/xxx.jpg），前端需要拼接完整的/media/前缀：

修改RestaurantCard组件的图片src：

<img
  src={`/media/${restaurant.thumbnail_image}`}
  alt={restaurant.name}
  className="restaurantImg"
/>

可以在浏览器控制台打印restaurant.thumbnail_image的值，如果返回的是完整URL（如http://127.0.0.1:8000/media/xxx.jpg），则无需拼接，直接使用即可。

四、验证文件存在性 #

检查DjangoMEDIA_ROOT目录下是否存在对应图片文件，确认文件名和API返回的路径完全一致，避免文件上传失败或命名错误。

测试流程 #

1. 重启Django开发服务器和Vite开发服务器
2. 直接访问http://localhost:5173/media/[你的图片路径]，确认图片能正常显示
3. 刷新前端页面，查看餐厅列表图片是否渲染成功

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