为什么 django 无法在 AMP-story 播放器中显示图像和视频

Question

我已经花费数周时间尝试解决此问题，我不知道为什么 AMP Story 无法通过 Django 数据库加载我 post 的图像，但不知何故我观察到一个非常它能够加载未从数据库请求的图像和视频的奇怪行为，而且如果图像是从资产目录加载的，我必须添加 JPG、PNG 等图像格式，以便显示在 AMP 播放器中。我现在主要关心的是： 1.How 我是否需要从 Django 数据库请求图像和视频才能在 amp story 播放器中工作？ 2.Since 播放器需要我指定图像的文件格式，例如 JPG、PNG、JPNG 等。我该怎么做？

这是我所做的示例代码，这就是播放器！

{% extends "base.html" %}

{% block content %}
{% for a in amp %}
<amp-story standalone
title="Joy of Pets"
publisher="AMP tutorials"
publisher-logo-src="assets/AMP-Brand-White-Icon.svg"
poster-portrait-src="assets/cover.jpg">
<amp-story-page id="cover">
<amp-story-grid-layer template="fill">
  <amp-img  srcset="{{ a.images.url }}"
      width="720" height="1280"
      layout="responsive"  amp-story-player-poster-img>
  </amp-img>
</amp-story-grid-layer>
<amp-story-grid-layer template="vertical">
  <h1>{{ a.title }}</h1>
  <p>{{ a.description }} </p>
</amp-story-grid-layer>
</amp-story-page>

<!-- Page 1 (Cat): 1 layer (vertical) -->
<amp-story-page id="page1">
<amp-story-grid-layer template="vertical">
  <h1>{{a.title }}</h1>
  <amp-img  srcset="{{ a.images.url }}"
      width="720" height="1280"
      layout="responsive"  amp-story-player-poster-img>
  </amp-img>
  <q>{{ a.description }}</q>
</amp-story-grid-layer>
</amp-story-page>


<amp-story-grid-layer template="vertical" class="center-text">
  <p class="banner-text" animate-in="whoosh-in-right">{{a.description}}}</p>
</amp-story-grid-layer>
</amp-story-page>

<!-- Bookend -->
<amp-story-bookend src="bookend.json" layout="nodisplay"></amp-story-bookend>
</amp-story>
{% endfor %}
{% endblock %}

这是我的基础 HTML AMP 播放器

<!doctype html>
<html ⚡>
  <head>
    <meta charset="utf-8">
    <title>Joy of Pets</title>
    <link rel="canonical" href="pets.html">
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <script async custom-element="amp-video"
        src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>
    <script async custom-element="amp-story"
        src="https://cdn.ampproject.org/v0/amp-story-1.0.js"></script>
    <script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
    <link href="https://fonts.googleapis.com/css?family=Oswald:200,300,400" rel="stylesheet">
    <style amp-custom>
        amp-story {
          font-family: 'Oswald',sans-serif;
          color: #fff;
        }
        amp-story-page {
          background-color: #000;
        }
        h1 {
          font-weight: bold;
          font-size: 2.875em;
          font-weight: normal;
          line-height: 1.174;
        }
        p {
          font-weight: normal;
          font-size: 1.3em;
          line-height: 1.5em;
          color: #fff;
        }
        q {
          font-weight: 300;
          font-size: 1.1em;
        }
        amp-story-grid-layer.bottom {
          align-content:end;
        }
        amp-story-grid-layer.noedge {
          padding: 0px;
        }
        amp-story-grid-layer.center-text {
          align-content: center;
        }
        .wrapper {
          display: grid;
          grid-template-columns: 50% 50%;
          grid-template-rows: 50% 50%;
        }
        .banner-text {
          text-align: center;
          background-color: #000;
          line-height: 2em;
        }
      </style>
    
  </head>


  <body>
   {% block content %}
   {% endblock %}
  </body>
</html>

我的模型

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

Views.py，描述、标题和发布者属性都显示在 AMP 播放器中，但它不显示从数据库post编辑的图像或视频。


def ampplayer(request):
    amp = AMPStory.objects.all()
    context = {'amp':amp}
    return render(request,'ampstories/amp_player.html',context)

Answer 1

首先确定在你的settings.py下方你settings.py

MEDIA_URL = '/media/'

在你的主要项目中urls.py

from django.conf.urls import url
from django.views.static import serve


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

    url(r'^media/(?P<path>.*)$', serve,{'document_root': settings.MEDIA_ROOT}),
    url(r'^static/(?P<path>.*)$', serve,{'document_root': settings.STATIC_ROOT}),
]
if settings.DEBUG:
    urlpatterns += static(settings.STATIC_URL, document_root = settings.STATIC_ROOT)
    urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

然后确保在您的项目中添加媒体根目录和服务 urls.py 在你的 html 文件中

<amp-img  src="{{ a.images.url }}"
      width="720" height="1280"
      layout="responsive"  amp-story-player-poster-img>
  </amp-img>

使用 src 而不是 src set 因为有些浏览器不支持在你的 models.py

logo = models.ImageField(upload_to='ampstories/')
images = models.ImageField(upload_to='ampstories/')

不要在文件夹后面使用 / 除非你的文件夹名称是 ampstories/否则 django 会寻找文件夹名称 ampstories/ 我猜这必须解决你的问题

为什么 django 无法在 AMP-story 播放器中显示图像和视频

Why is django not able to display Images and videos in AMP-story player

django

django-templates

django-models

django-views