为什么此图未显示在模板中，但如果直接在 Django 应用程序中查看 URL 则工作正常？

Question

我的问题

我正在我的 Django 应用程序中创建交互式绘图。我已经为绘图模板创建了一个视图，并创建了一个仅生成绘图本身的视图，这样我就可以使用 <img src= "{% url 'ozmod:plot' %}"/> 来使用精美的绘图模板渲染绘图。

如果我导航到 URL 我已分配给绘图模板视图，我会看到一个损坏的图像 link 但导航栏和所有内容都可以正常扩展。如果我直接导航到 URL 以查看绘图，则绘图显示正常，但当然，导航栏和 page.html 中的所有内容都不会扩展。我已经包括了我的错误和我的代码的屏幕截图：

views.py

class PlotView(generic.TemplateView):
    template_name = 'ozmod/plot.html'

def RunOZCOT(request):
    fig = plt.figure()
    x = range(20)
    y = [i for i in range(20)]
    random.shuffle(y)
    plot = plt.plot(x,y)
    g = mpld3.fig_to_html(fig)
    return HttpResponse(g)

urls.py

app_name = 'ozmod'
urlpatterns = [
    path('', views.HomePageView.as_view(), name='home'),
    path('metfiles/', views.MetIndexView.as_view(), name='metindex'),
    path('metfiles/<int:pk>/', views.DetailView.as_view(), name='detail'),
    path('runmodel/', views.PlotView.as_view(), name = 'runmodel'),
    path('plot/', views.RunOZCOT, name = 'plot'),
]

plot.html

{% extends "ozmod/page.html" %}

{% block content %}

<img src= "{% url 'ozmod:plot' %}"/> 
<!-- http://myserver:8000/ozmod/plot/ -->

{% endblock %}

page.html ...为清楚起见缩写

{% load static %}

<!DOCTYPE html>
<head>
  <title>OZCOT interactive</title>
</head>
<body>

<ul class="nav nav-pills">
  <li class="{% if request.resolver_match.url_name == "home" %}active{% endif %}"><a href="{% url 'ozmod:home' %}">Home</a></li>
  <li class="{% if request.resolver_match.url_name == "metindex" %}active{% endif %}"><a href="{% url 'ozmod:metindex' %}">MetIndex</a></li>
  <li class="{% if request.resolver_match.url_name == "runmodel" %}active{% endif %}"><a href="{% url 'ozmod:runmodel' %}">Plot</a></li>
</ul>

<div class="container-fluid text-center">
    {% block content %}{% endblock content %}
</div>

<nav class="navbar navbar-default navbar-fixed-bottom">
        <div class="container">
            <p>This is a test</p>
        </div>
      </nav>

</body>
</html>

这就是 myserver:8000/ozmod/runmodel/ 的样子

这就是 myserver:8000/ozmod/plot/ 的样子

缺少什么？

所以绘图工作正常，但当我在主绘图模板中引用服务于该视图的 url 时不会显示。我错过了什么？

编辑：2018-03-23

使用 `<embed>` 而不是 `<img>`。

问题在于使用 <img> 而不是 <embed>。通过嵌入，交互功能保持响应。

正确views.py：

{% extends "ozmod/page.html" %}

{% block content %}

<embed src="{% url 'ozmod:plot' %}" width="800" height="600">

{% endblock %}

结果：

Answer 1

我不太明白 mpld3.fig_to_html() 的作用 - 文档非常稀疏，我对 matplotlib 或 mpld3 一无所知 - 但它似乎是 returning 某种HTML。这不能用作图像的 src，它需要一个图像格式（gif/png/jpeg 等）的单个文件。

您需要使用 matplotlib 以该格式保存绘图，并 return 将其保存在 HttpResponse 中。类似的东西（记住我根本不了解图书馆）：

plot = plt.plot(x,y)
response = HttpResponse()
plot.savefig(response)
return response

为什么此图未显示在模板中，但如果直接在 Django 应用程序中查看 URL 则工作正常？

Why is this plot not displaying in template but works fine if URL is viewed directly in Django app?

python

django

plot

mpld3

我的问题

views.py

urls.py

plot.html

page.html ...为清楚起见缩写

这就是 myserver:8000/ozmod/runmodel/ 的样子

这就是 myserver:8000/ozmod/plot/ 的样子

缺少什么？

编辑：2018-03-23

使用 `<embed>` 而不是 `<img>`。

正确views.py：

结果：

为什么此图未显示在模板中，但如果直接在 Django 应用程序中查看 URL 则工作正常？

Why is this plot not displaying in template but works fine if URL is viewed directly in Django app?

python

django

plot

mpld3

我的问题

views.py

urls.py

plot.html

page.html ...为清楚起见缩写

这就是 myserver:8000/ozmod/runmodel/ 的样子

这就是 myserver:8000/ozmod/plot/ 的样子

缺少什么？

编辑：2018-03-23

使用 <embed> 而不是 <img>。

正确views.py：

结果：

使用 `<embed>` 而不是 `<img>`。