python flask+jinjia2读取项目外文件传向前端显示及报错问题解决

python UnicodeDecodeError: ‘gbk’ codec can’t decode byte 0xff in position 0: illegal multibyte seque报错问题解决

报错问题解决:

想用一个flask+jinjia2模板想前端读取项目外的图片文件传向前端进行渲染,结果报了错
显示效果:
前端代码:

{% extends 'base.html' %}
{% block content %}

    <section class="site-hero overlay" data-stellar-background-ratio="0.5"
             style="background-image: url(../static/images/big_image_1.jpg);">
        <div class="container">
            <div class="row align-items-center site-hero-inner justify-content-center">
                <div class="col-md-10" style="background-color: rgba(255,255,255,0.9);min-height:300px;">
                    <h2>用户列表</h2>
                    <form class="form-inline element-animate" id="search-form" method="POST" action="view.html">
                        <table class="table">
                            <thead>
                            <tr>
                                <th scope="col">序号</th>
                                <th scope="col">手机号</th>
                                <th scope="col">显示名</th>
                                <th scope="col">目的楼层</th>
                                <th scope="col">头像</th>
                            </tr>
                            </thead>
                            <tr>
                                <th scope="row">1</th>
                                <td>18018892314</td>
                                <td>王二娃</td>
                                <td>2F</td>
                                <td><img src="../static/images/person_2.jpg" width="40px" height="60px"></td>
                            </tr>
                            <tr>
                                <th scope="row">2</th>
                                <td>18018843213</td>
                                <td>李浮萍</td>
                                <td>3F</td>
                                <td><img src="data:image/jpg;base64,{{ data.img_url }}" width="40px" height="60px"></td>
                            </tr>
                        </table>
                        <ul class="pagination">
                            <li><a href="#">&laquo;</a></li>
                            <li><a href="#">1</a></li>
                            <li><a href="#">2</a></li>
                            <li><a href="#">3</a></li>
                            <li><a href="#">4</a></li>
                            <li><a href="#">5</a></li>
                            <li><a href="#">&raquo;</a></li>
                        </ul>
                    </form>
                </div>
            </div>
        </div>
    </section>
{% endblock %}

前端模板填充渲染位置

<td><img src="data:image/jpg;base64,{{ data.img_url }}" width="40px" height="60px"></td>

后端代码:

@picManagement_blu.route('/userList', methods=['GET', 'POST'])
def userList():
    img_local_path = config.img_urlb
    with open(img_local_path, 'rb') as img_f:  
        img_stream = img_f.read()
        img_stream = base64.b64encode(img_stream).decode('utf-8')
    data = {'home_url': config.home_url,
            'user_list_url': config.user_list_url,
            'img_url': img_stream}
    return render_template('userList.html', data=data)

注:with open() 不能使用r模式读取文件,否侧会报错
记得读取后使用decode进行解码

打开浏览器访问即可显示图片

http://127.0.0.1:8888/userList