如何从Vue.js前端正确访问Django媒体文件？解决图片加载异常

核心原因 #

你遇到的问题本质是前后端域名/端口不一致导致的：Vue前端运行的域名（比如http://localhost:8080）会把/api/media/image.jpg这类相对路径解析成自身域名下的请求，而非指向Django后端（http://127.0.0.1:8000），所以浏览器请求不到图片显示破碎；但直接在新标签页打开后端完整URL时，请求的是正确的后端地址，因此能正常显示。

两种解决方法 #

方法一：在Django后端返回完整的媒体文件绝对URL #

修改Django序列化器，给媒体文件URL添加上后端的完整域名前缀，让Vue直接拿到可访问的绝对路径：

from rest_framework import serializers
from .models import YourModel  # 替换成你的模型类

class YourModelSerializer(serializers.ModelSerializer):
    # 自定义image字段的返回逻辑
    image = serializers.SerializerMethodField()

    def get_image(self, obj):
        # 通过request对象生成完整的绝对URL
        request = self.context.get('request')
        if obj.image:
            return request.build_absolute_uri(obj.image.url)
        return None

    class Meta:
        model = YourModel
        fields = ['image', ...]  # 其他字段按需添加

修改后，接口返回的card.image会是类似http://127.0.0.1:8000/api/media/image.jpg的完整地址，Vue的img标签就能直接正确请求图片。

方法二：配置Vue前端的代理转发 #

如果不想修改后端代码，可以在Vue项目中配置代理，将/api/media路径的请求转发到Django后端：

Vue CLI 项目（vue.config.js）

在项目根目录的vue.config.js中添加代理配置：

module.exports = {
    devServer: {
        proxy: {
            '/api/media': {
                target: 'http://127.0.0.1:8000',  // 你的Django后端地址
                changeOrigin: true
            }
        }
    }
}

Vite 项目（vite.config.js）

如果是用Vite构建的Vue项目，在vite.config.js中配置：

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

export default defineConfig({
    plugins: [vue()],
    server: {
        proxy: {
            '/api/media': {
                target: 'http://127.0.0.1:8000',
                changeOrigin: true
            }
        }
    }
})

配置完成后重启Vue服务，前端请求/api/media/image.jpg时会自动转发到Django后端，图片就能正常显示。

额外检查点 #

• 确认Django的DEBUG = True：因为static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)仅在开发环境（DEBUG=True）生效，生产环境需要用Nginx等服务器托管媒体文件。
• 确认MEDIA_ROOT和MEDIA_URL配置正确：你的MEDIA_ROOT = os.path.join(BASE_DIR, 'media/')和MEDIA_URL = '/api/media/'配置是正确的，无需修改。

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