CSS在HTML中正常渲染而在FLASK中无法渲染的解决办法


一、首先我们需要检查文件位置是否正确,必须要有templates文件与static文件作为支持才能正常渲染

8928c3ecdfea4c918fc6850d42ed01f5.png

我们可以看到我们已经创建了一个static文件和templates的文件夹,并且在templates文件夹中存放了html文件,在static下存放了css文件。


二、我们需要对路径进行检查以及对路径应用进行修改


        1、方法一,网络大部分采用的修改代码(但本人经过修改后还是无法使用,因此下面提供了方法二,若采用方法一后还是无法正常使用则采用方法2中中)

网上大部分方式采用的是将下面的代码(html文件可以正常应用css的情况)

<link rel="stylesheet" href="../stnatic/bootstrap/css/bootstrap.mi.css">
<script src="../static/js/html5shiv.js"></script>

更改为如下代码(flask能够正确引用路径的情况):

<link rel="stylesheet" href="{{url_for('static',filename='../stnatic/bootstrap/css/bootstrap.mi.css')}}">
<script src="{{url_for('static',filename ='../static/js/html5shiv.js')}}"></script>
                           

经过实测该方法在经过步骤一的设置后还是无法正常使用,故本文提供了第二种解决办法


        2、方法二,采用如下方法(其实就是直接引用static文件中的css就可以了)

168d55ea026b43c1a0769b18eb48b3d3.png

        

        包括我们可以在static文件中创建多个文件夹使我们能够增加更多样式以及js及外部引用、图片等,只需要在html中正确更改路径即可,下面是创建/css、/js文件夹为示例(也可以创建图像文件用于存放图像等):

1f10ace0a5eb4f599a16a7c5fce81eec.png


本文作为个人学习备忘录使用,希望也能够为各位的学习带来帮助

  • 15
    点赞
  • 18
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
可以使用 pyecharts 的 render_template 方法将图表渲染HTML 文件。具体步骤如下: 1. 在 Python 读取 JSON 文件并使用 pyecharts 绘制图表。 ```python from pyecharts.charts import Bar import json # 读取 JSON 文件 with open('data.json', 'r') as f: data = json.load(f) # 绘制图表 bar = Bar() bar.add_xaxis(data['x_axis']) bar.add_yaxis('数据', data['y_axis']) bar.render('chart.html') ``` 2. 在 HTML 文件引入必要的 JavaScript 和 CSS 文件,以及 pyecharts 的渲染代码。 ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>图表示例</title> <!-- 引入必要的 JavaScript 和 CSS 文件 --> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.9.0/echarts.min.js"></script> <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/pyecharts/1.9.0/themes/white.min.css"> </head> <body> <!-- 图表容器 --> <div id="chart" style="width: 600px;height:400px;"></div> <!-- pyecharts 渲染代码 --> <script src="https://cdn.bootcdn.net/ajax/libs/pyecharts/1.9.0/pyecharts.min.js"></script> <script type="text/javascript"> // 使用 jQuery 获取图表容器 var chart = $('#chart')[0]; // 使用 pyecharts 的 render 方法渲染图表 var myChart = echarts.init(chart, 'white'); myChart.setOption(%s); </script> </body> </html> ``` 3. 在 Python 使用 render_template 方法将图表渲染HTML 文件。 ```python from pyecharts import options as opts from pyecharts.charts import Bar from flask import Flask, render_template import json app = Flask(__name__) @app.route('/') def index(): # 读取 JSON 文件 with open('data.json', 'r') as f: data = json.load(f) # 绘制图表 bar = Bar() bar.add_xaxis(data['x_axis']) bar.add_yaxis('数据', data['y_axis']) # 将图表转换为 JSON 格式 chart = bar.dump_options_with_quotes() # 渲染 HTML 模板并将图表嵌入其 return render_template('chart.html', chart=chart) if __name__ == '__main__': app.run(debug=True) ``` 在浏览器访问 http://127.0.0.1:5000/ 即可看到渲染后的图表。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值