weixin_54385215
2021-11-12 16:00
采纳率: 78.6%
浏览 87
已结题

一个图片目录如何编写以下内容,能教教我嘛,emo了

img


不会写这段代码有示例教教嘛!或者能不能教教我鸭!!十分感谢!!

  • 写回答
  • 好问题 提建议
  • 追加酬金
  • 关注问题
  • 邀请回答

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这个路径放图片文件

    img

    最终效果
    直接访问

    img


    vue+axios动态加载测试

    img

    有帮助麻烦点下【采纳该答案】,谢谢~~有其他问题可以继续交流~

    评论
    解决 无用
    打赏 举报 编辑记录
查看更多回答(2条)

相关推荐 更多相似问题