程序员最近都爱上了这个网站  程序员们快来瞅瞅吧!  it98k网:it98k.com

本站消息

站长简介/公众号

  出租广告位,需要合作请联系站长

+关注
已关注

分类  

暂无分类

标签  

暂无标签

日期归档  

暂无数据

使用Flask引用HTML中的.js文件的静态资源问题

发布于2021-01-16 03:36     阅读(2180)     评论(0)     点赞(16)     收藏(3)


直接打开时,我的html文件将加载我的OpenLayers JavaScript文件(该文件加载地图框架)。但是,当我从Flask python应用程序运行html时,JavaScript文件/对象无法加载(没有显示地图,仅显示一些标题文本)。

该问题似乎在这里排序:

在Flask上运行时未添加外部JavaScript文件

但是由于我的文件夹结构,我似乎无法加载.js。没有错误,页面中没有地图加载。我认为我需要有关“静态”参考语法的帮助。我认为这是问题所在,但是我对网站建设非常陌生。这是我的项目文件夹结构:

ol_app.py
/pages
    olquickstart.html
/static
    /scripts
        ol_script.js
/libs
    /v6.3.1-dist
        ol.css
        ol.css.map
        ol.js
        ol.js.map

我的Flask python应用程序:

from flask import Flask, render_template
import os
import webbrowser
from threading import Timer

template_dir = os.path.abspath(r'D:\PathToProject\ol_quickstart\pages')
app = Flask(__name__, template_folder=template_dir)

#home page
@app.route('/')
def index():
    return '<a href="http://127.0.0.1:5000/ol_qs">OL QuickStart</a>'

#openlayers test page
@app.route('/ol_qs')
def ol_qs():
    return render_template("olquickstart.html")

#run app
def open_browser():
    webbrowser.open_new('http://127.0.0.1:5000/')

if __name__ == "__main__":
    Timer(1, open_browser).start();
    app.run(port=5000)

我的html:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="../libs/v6.3.1-dist/ol.css" type="text/css">
    <style>
      .map {
        height: 900px;
        width: 100%;
      }
    </style>
    <script src="../libs/v6.3.1-dist/ol.js"></script>
    <title>OpenLayers Quickstart</title>
  </head>
  <body>
    <h2>OL Quickstart Map</h2>
    <div id="js-map" class="map"></div>
    <!-- <script src='../static/scripts/ol_script.js'></script> I USE THIS LINE WHEN OPENING THE HTML DIRECTLY WITHOUT FLASK-->
    <script type="text/javascript"
        src="{{ url_for('static', filename='scripts/ol_script.js') }}"></script>
  </body>
</html>

这是问题吗?

<script type="text/javascript" src="{{ url_for('static', filename='scripts/ol_script.js') }}"></script>


解决方案


看起来您需要将libs目录移动到其中static,然后包括具有与url_for您现有功能相似的功能的那些文件

<link rel="stylesheet" type="text/css"
 href="{{ url_for('static', filename='libs/v6.3.1-dist/ol.css') }}">

<script type="text/javascript"
 src="{{ url_for('static', filename='libs/v6.3.1-dist/ol.js') }}"></script>

您现有的一个scripts/ol_script.js看起来很正确。

但是,要自己进行调试,您应该在Web浏览器中加载开发工具并查看Network选项卡,以确保每个JS文件都能成功加载且不会404。

同样,该Console标签会向您显示该页面内的所有JavaScript错误。



所属网站分类: 技术文章 > 问答

作者:黑洞官方问答小能手

链接:https://www.pythonheidong.com/blog/article/772582/2363db0d3d3cb456a713/

来源:python黑洞网

任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任

16 0
收藏该文
已收藏

评论内容:(最多支持255个字符)