Django中AMP-story播放器无法加载数据库内图片视频如何解决？

问题1：Django数据库存储的图片/视频无法在AMP Story渲染的解决方案 #

• 修正媒体资源基础配置
  首先确保settings.py中已经正确配置媒体资源参数：

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

之后在项目根urls.py中添加媒体资源路由，开发环境下可直接通过Django返回媒体文件：

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

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

• 改用绝对路径传递资源地址
  AMP Story对相对路径资源的兼容性很差，必须传递完整的绝对路径，你可以直接在模板中调用request.build_absolute_uri生成绝对路径，修改模板中的amp-img标签：

<amp-img  srcset="{{ request.build_absolute_uri(a.images.url) }}"
    width="720" height="1280"
    layout="responsive"  amp-story-player-poster-img>
</amp-img>

视频同理，添加amp-video标签时也要用同样的方式生成src：

{% if a.video %}
<amp-video width="720" height="1280" layout="responsive" autoplay loop muted>
  <source src="{{ request.build_absolute_uri(a.video.url) }}" type="video/mp4">
</amp-video>
{% endif %}

• 修复模板语法错误
  你提供的播放器模板中存在多余的</amp-story-page>闭合标签，位于page1结束之后的grid layer外侧，删除这个多余的闭合标签避免DOM结构异常导致的渲染失败。

问题2：满足AMP Player要求显式指定文件格式的解决方案 #

• 上传时强制保留文件后缀
  你可以自定义文件上传路径的生成函数，确保上传的文件都带有正确的格式后缀，修改模型层代码：

import os
from django.utils.text import slugify

def generate_upload_path(instance, filename):
    ext = filename.split('.')[-1].lower()
    filename = f"{slugify(instance.title)}_{instance.pk}.{ext}"
    # 图片和视频分目录存储可自行调整路径
    return f"ampstories/{filename}"

class AMPStory(models.Model):
    title = models.CharField(max_length=300)
    publisher = models.CharField(max_length=300)
    logo = models.ImageField(upload_to=generate_upload_path)
    images = models.ImageField(upload_to=generate_upload_path)
    video = models.FileField(upload_to=generate_upload_path,blank=True,null=True)
    description = models.CharField(max_length=500)

    # 可新增属性直接获取文件格式
    @property
    def image_ext(self):
        return os.path.splitext(self.images.name)[-1].lower()

• 动态资源添加伪后缀（可选）
  如果你的资源是通过动态接口返回、本身没有后缀的，可以在Django路由中配置兼容后缀的规则，比如将/media/xxx/.jpg的请求映射到对应的资源接口，让AMP Player从路径中识别到格式后缀即可，不需要实际文件带后缀。

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