时间戳

首页 > 解决方案 > HTML如何使用Flask嵌入图片？

html - HTML如何使用Flask嵌入图片？

问题描述

我正在用烧瓶设置一个网络应用程序。我尝试在以下代码中显示远程图片 Flask 用https://gitlab.com/MindReadH/Articles/raw/master/spain.png替换 {{article["image"]}}：

<html>
    <head>
        <title>{{article.title}}</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" type="text/css" href="{{url_for('static',filename ='vendor/bootstrap/css/bootstrap.min.css')}}">
        <link rel="stylesheet" type="text/css" href="{{url_for('static',filename ='fonts/font-awesome-4.7.0/css/font-awesome.min.css')}}">
        <link rel="stylesheet" type="text/css" href="{{url_for('static',filename ='css/articleDetail.css')}}"/>
    </head>

        <body>
        <div class="container">

            <center><a href="{{url_for('get_article_list',category=category,page=1)}}"><i class="fa fa-arrow-left fa-3x"></i></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="{{url_for('user_index')}}"><i class="fa fa-home fa-3x"></i></a></center>
            <div class="card mb-4">
                <div class="card-body">
                    <h2 class="card-title" align="center">{{ article['title'] }}</h2>
                    <p align="center" class="card-text">{{ article['abstract']}}</p>
                    <p align="center" class="card-text">Category : {{ article['category']}}</p>
                    <p align="center" class="card-text">Article Tags : {{ article['articleTags']}}</p>
                    <p align="center" class="card-text">Authors : {{ article['authors']}}</p>
                    <p align="center" class="card-text">Language : {{ article['language']}}</p>
                    <p align="center" class="card-text">Text : {{ article['text']}}</p>
                    <img src={{article['text']}} class="inline"/>
                    <p align="center" class="inline-text">Image : {{ article['image']}}</p>
                    <img src={{article['image']}} class="inline"/>
                    <p align="center" class="card-text">Video : {{ article['video']}}</p>
                    <video controls><source src={{article['video']}}class="inline"/></video>
                </div>
                <!--<img class="card-img-top" src="http://placehold.it/750x300" alt="Card image cap">-->
            </div>
        </div>
    </body>
</html>

不出所料，第一行

<p align="center" class="inline-text">Image : {{ article['image']}}</p

返回图片：https ://gitlab.com/MindReadH/Articles/raw/master/spain.png这是图片的地址

但是第二行没有加载图像。Firefox 日志说：“加载所有可能的资源失败”

编辑

正如 Luis Melo 指出的那样，我只是错过了 src 文件中的引号：

<img src="{{article['image']}}" class="inline"/>

标签： htmlflask

解决方案

问题是您没有在 html 中使用引号。

尝试像这样替换每个src和href：

<img src={{article['image']}} class="inline"/>

带引号的参数：

<img src="{{article['image']}}" class="inline"/>

您可以将此处的解决方案与您面临的相同问题一起可视化。

推荐阅读