Vue.js无法加载Django媒体文件夹中图片的问题排查

本地运行的Django服务器正常启动，授权后的Vue页面能正常获取模型数据。页面审查可见img元素的URL解析正确，且该图片可直接通过此URL加载，但页面上图片无法显示，其他模型参数（如名称、价格）可正常加载。

相关代码 #

Django模型方法 #

def get_thumbnail(self):
        if self.thumbnail:
            return 'http:://127.0.0.1:8000/' + self.thumbnail.url
        else:
            if self.image:
                self.thumbnail = self.make_thumbnail(self.image)
                self.save()

                return 'http:://127.0.0.1:8000/' + self.thumbnail.url
            else:
                return ''

Vue图片加载代码 #

<figure class="image mb-4">
            <img v-bind:src="product.get_thumbnail" />
</figure>

Django媒体路径配置 #

MEDIA_URL = '/media/'
MEDIA_ROOT = BASE_DIR / 'media/'

问题定位 #

更新：已发现问题：图片src属性存在格式异常

解决方案 #

问题根源是Django模型方法返回的URL存在拼写错误——http:://多写了一个冒号，正确的URL格式应为http://（单冒号）。浏览器直接访问时可能自动修正该错误，但Vue绑定src时，格式错误会导致图片加载失败。

修正方案1：修正URL拼写 #

修改Django模型方法中的URL拼接部分，将'http:://127.0.0.1:8000/'改为'http://127.0.0.1:8000/'：

def get_thumbnail(self):
        if self.thumbnail:
            return 'http://127.0.0.1:8000/' + self.thumbnail.url
        else:
            if self.image:
                self.thumbnail = self.make_thumbnail(self.image)
                self.save()

                return 'http://127.0.0.1:8000/' + self.thumbnail.url
            else:
                return ''

修正方案2：使用动态生成绝对URL（推荐） #

避免硬写域名和端口，使用Django的request.build_absolute_uri生成完整URL，适配不同部署环境：

from django.http.request import HttpRequest

def get_thumbnail(self, request: HttpRequest):
        base_url = request.build_absolute_uri('/')
        if self.thumbnail:
            return base_url.rstrip('/') + self.thumbnail.url
        else:
            if self.image:
                self.thumbnail = self.make_thumbnail(self.image)
                self.save()
                return base_url.rstrip('/') + self.thumbnail.url
            else:
                return ''

调用该方法时需传入request对象，无需手动维护域名信息。

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