Почему django не может отобразить изображения и видео в плеере AMP-story
Я уже несколько недель пытаюсь решить эту проблему, я не знаю, почему AMP Story не загружает изображения, которые я размещаю через базу данных Django, но каким-то образом я заметил очень странное поведение: он может загружать изображения и видео, которые не были запрошены из базы данных, а также если изображения загружаются из каталога активов, я должен добавить формат изображения, такой как JPG, PNG и т.д., чтобы они отображались в AMP Player. Сейчас меня беспокоит следующее: 1.Как мне запросить изображения и видео из базы данных Django, чтобы они могли работать в плеере amp story? 2.Поскольку плеер требует, чтобы я указал формат файла изображения, например, 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 Player
<!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, Атрибуты description, title и publisher отображаются в AMP-плеере, но не отображаются изображения или видео, размещенные в базе данных.
def ampplayer(request):
amp = AMPStory.objects.all()
context = {'amp':amp}
return render(request,'ampstories/amp_player.html',context)
Сначала убедитесь, что в вашем 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)
затем убедитесь, что media root и serve добавлены в 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/ это должно решить вашу проблему, я думаю