为什么django无法在AMP-story player中显示图像和视频
为什么django无法在AMP-story player中显示图像和视频
提问于 2021-10-04 13:45:11
我已经堆叠了几周来试图解决这个问题，我不知道为什么AMP故事不会加载我通过Django数据库发布的图像，但不知何故，我观察到它能够加载图像和视频的非常奇怪的行为，这些图像和视频不是从数据库请求的，而且如果图像是从资产目录加载的，我必须添加图像格式，如JPG，PNG等。以便在AMP播放器中显示。我现在主要关心的是:1.我如何从Django数据库请求图像和视频，以便能够在amp故事播放器中工作?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 %}这是AMP播放器的基础HTML
<!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)回答 1
Stack Overflow用户
回答已采纳
发布于 2021-10-04 15:01:05
首先，确保在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中的src
logo = models.ImageField(upload_to='ampstories/')
images = models.ImageField(upload_to='ampstories/')不要在文件夹后使用/，除非您的文件夹名为ampstories/否则django将查找文件夹名为ampstories/我猜这会解决您的问题
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/69437106
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号