如何制作烧瓶应用程序中显示的图像的直方图？

Question

我对Web开发和Flask相当陌生。由于这是我的第一个问题，如果我的问题似乎太宽泛，我深表歉意。如果需要提供有关我的问题的其他详细信息，请告诉我。

我正在构建一个Flask Web应用程序，该应用程序将显示图像（当用户从​​文件夹中选择时）以及有关该图像的所有信息。这些信息包括：图像大小，图像通道数（如果是彩色图像，则为3；如果是灰度图像，则为1）以及图像的直方图。每次选择显示新图像时，应用程序必须显示3个独立的直方图（用于红色，蓝色和绿色通道）。图像和图像的所有信息必须全部显示在同一页面中。

我尝试使用本文档中所述的pixastic库（这是用于图像处理的JavaScript库）： https://billmill.org/the_histogram.html

具体来说，源代码为：https://billmill.org/static/pixastic/demos/hist_demo.html

我已经在html文档的head部分中导入了所有必需的jQuery和JavaScript文件。当我尝试运行flask应用程序时，仅渲染图像，但不显示直方图。

我已经使用chrome调试器工具进行了分析，下面是chrome调试器中显示的文件组织结构：

Orgn Structure

我在chrome控制台标签中遇到的错误是：

:4555/favicon.ico:1 Failed to load resource: the server responded with a status of 404 (NOT FOUND)

我希望直方图按源代码中所示的样子进行渲染（上面的链接），但是仅显示图像。

编辑：这就是我导入库JavaScript and JQuery Libraries

的方式