不会写这段代码有示例教教嘛!或者能不能教教我鸭!!十分感谢!!
3条回答 默认 最新
- CSDN专家-showbo 2021-11-12 16:32关注
不就是用flask搭建个web服务器显示flask项目下的图片路径吗。大概示例如下
app.py,直接生成访问路由“/”,测试vue动态加载访问 "/vue"from flask import Flask, request,render_template import json import os app = Flask(__name__, static_url_path='') #直接显示 @app.route('/') def index(): url=r"static/images/"#读取当前py文件下static/images目录下的图片文件 arr=[] for root,dir,files in os.walk(url): for f in files: if(f.lower().endswith(('.png', '.jpg', '.jpeg', '.gif'))): arr.append("/images/"+f) return render_template("index.html",files=arr) #vue+axios专用,动态加载 @app.route('/data',methods=['GET','POST']) def data():#数据接口 url=r"static/images/"#读取当前py文件下static/images目录下的图片文件 arr=[] for root,dir,files in os.walk(url): for f in files: if(f.lower().endswith(('.png', '.jpg', '.jpeg', '.gif'))): arr.append("/images/"+f) return json.dumps(arr) @app.route('/vue') def vue():#前端页面,测试vue访问这个地址 return render_template("vue.html") if __name__ == "__main__": app.run('0.0.0.0', port=8001,debug=True)
templates/index.html,注意在app.py下建立templates目录,将index.html放里面
<meta charset="utf-8" /> <style> img{display:inline-block;margin-right:10px;height:100px} a{text-decoration:none} </style> {% for f in files %} <a rhef="{{f}}" target="_blank"><img src="{{f}}" /></a> {% endfor %}
templates/vue.html
<meta charset="utf-8" /> <style> img{display:inline-block;margin-right:10px;height:100px} a{text-decoration:none} </style> <div id="app"> <a v-for="f in files" v-bind:href="f"> <img v-bind:src="f" /> </a> </div> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> new Vue({ el: '#app', data: { files: [] }, mounted() { axios.get('/data').then((res) => { this.files = res.data; }).catch(() => { alert('加载数据失败') }) } }) </script>
static/images这个路径放图片文件
最终效果
直接访问
vue+axios动态加载测试有帮助麻烦点下【采纳该答案】,谢谢~~有其他问题可以继续交流~
本回答被题主选为最佳回答 , 对您是否有帮助呢?解决 无用评论 打赏 举报 编辑记录
悬赏问题
- ¥15 请问有人会紧聚焦相关的matlab知识嘛?
- ¥50 yalmip+Gurobi
- ¥20 win10修改放大文本以及缩放与布局后蓝屏无法正常进入桌面
- ¥15 itunes恢复数据最后一步发生错误
- ¥15 关于#windows#的问题:2024年5月15日的win11更新后资源管理器没有地址栏了顶部的地址栏和文件搜索都消失了
- ¥100 H5网页如何调用微信扫一扫功能?
- ¥15 讲解电路图,付费求解
- ¥15 有偿请教计算电磁学的问题涉及到空间中时域UTD和FDTD算法结合的
- ¥15 three.js添加后处理以后模型锯齿化严重
- ¥15 vite打包后,页面出现h.createElement is not a function,但本地运行正常