Python Flask / Sqlite：如何在帖子内容中嵌入图像答案

【问题标题】：Python Flask / Sqlite: How to embed images in a post contentPython Flask / Sqlite：如何在帖子内容中嵌入图像
【发布时间】：2021-01-09 18:49:58
【问题描述】：

我是编程和 Python Flask 的新手，我正在尝试设计一个博客作为第一个项目。我能够创建一个直接连接到我的 SQLite 数据库的页面（“添加”），以便直接在那里编写和发布帖子。问题是我没想到我也想在文本内容中添加图像，我不知道该怎么做。这是我的主页：

from flask import Flask, render_template, request, redirect, url_for
from flask_sqlalchemy import SQLAlchemy
from datetime import datetime




 
app = Flask(__name__)

app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:////Users/admin/Desktop/Blog_Project/blog2.db'

db = SQLAlchemy(app)

class Blogpost2(db.Model):

    id = db.Column(db.Integer, primary_key = True)
    title = db.Column(db.String(50))
    subtitle = db.Column(db.String(50))
    author = db.Column(db.String(20))
    date_posted = db.Column(db.DateTime)
    content = db.Column(db.Text)

db.create_all() 

@app.route('/')
def index():

    posts = Blogpost.query.all()

    return render_template('index.html', posts = posts)

@app.route('/about')
def about():
    return render_template('about.html')
    

#@app.route('/post')
#def post():
    #return render_template('post.html')

@app.route('/post/<int:post_id>')
def post(post_id):
    post = Blogpost2.query.filter_by(id=post_id).one()

    date_posted = post.date_posted.strftime('%d %B, %Y')

    return render_template('post.html', post=post, date_posted = date_posted)


@app.route('/contact')
def contact():
    return render_template('contact.html')


@app.route('/prova')
def prova():
    return render_template('prova.html')


@app.route('/add')
def add():
    return render_template('add.html')

@app.route('/addpost', methods=['POST'])
def addpost():
    
    title = request.form['title']
    subtitle = request.form['subtitle']
    author = request.form["author"]
    content = request.form['content']


    #return '<h1>Title:{} Subtitle:{} Author:{} Content:{} <h1/>'.format(title, subtitle, author, content)
    post = Blogpost2(title=title, subtitle=subtitle, author=author, content=content, date_posted = datetime.now())


    db.session.add(post)
    db.session.commit()
    

    return redirect(url_for('index'))




if __name__ == "__main__":
    app.run(debug = True)

如您所见，博客标题、副标题、作者、内容等将被输入 SQLlite 数据库。这将通过“添加”页面发生，您可以在此处查看代码：

<!DOCTYPE html>
<html lang="en">

<head>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="">
  <meta name="author" content="">

  <title>Clean Blog - Start Bootstrap Theme</title>

  <!-- Bootstrap core CSS -->
  <!-- <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet"> -->
  <link href= "{{ url_for('static', filename='bootstrap.min.css')}}" rel="stylesheet">

  <!-- Custom fonts for this template -->
  <!--  <link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">                              -->
  <link href="{{url_for('static', filename = 'fontawesome.min.css')}}" rel="stylesheet" type="text/css">
  <link href='https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
  <link href='https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>

  <!-- Custom styles for this template -->
  <link href="{{url_for('static', filename = 'clean-blog.min.css')}}" rel="stylesheet">

</head>

<body>

   <!-- Navigation -->
  <nav class="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav">
    <div class="container">
      <a class="navbar-brand" href= "{{ url_for('index') }}">Start Bootstrap</a>
      <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
        Menu
        <i class="fas fa-bars"></i>
      </button>
      <div class="collapse navbar-collapse" id="navbarResponsive">
        <ul class="navbar-nav ml-auto">
          <li class="nav-item">
            <a class="nav-link" href="{{ url_for('index')}}">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="{{ url_for('about')}}">About</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="{{ url_for('contact')}}">Contact</a>
          </li>
          
          <li class="nav-item">
            <a class="nav-link" href="{{ url_for('prova')}}">Prova</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

  <!-- Page Header -->
  <header class="masthead" style="background-image: url('img/contact-bg.jpg')">
    <div class="overlay"></div>
    <div class="container">
      <div class="row">
        <div class="col-lg-8 col-md-10 mx-auto">
          <div class="page-heading">
            <h1>Aggiungi un post </h1>
            <span class="subheading"> </span>
          </div>
        </div>
      </div>
    </div>
  </header>

  <!-- Main Content -->
  <div class="container">
    <div class="row">
      <div class="col-lg-8 col-md-10 mx-auto">
        <form name="addForm" id="addForm" method = "POST" action= "{{ url_for('addpost') }}" novalidate>
          <div class="control-group">
            <div class="form-group floating-label-form-group controls">
              <label>Title</label>
              <input type="text" class="form-control" placeholder="Title" name = "title" id="title" required data-validation-required-message="Dai un titolo al tuo post">
              <p class="help-block text-danger"></p>
            </div>
          </div>
          <div class="control-group">
            <div class="form-group floating-label-form-group controls">
              <label>Subtitle</label>
              <input type="text" class="form-control" placeholder="Subtitle" name = "subtitle" id="subtitle" required data-validation-required-message="Please enter your email address.">
              <p class="help-block text-danger"></p>
            </div>
          </div>
          <div class="control-group">
            <div class="form-group col-xs-12 floating-label-form-group controls">
              <label>Author</label>
              <input type="text" class="form-control" placeholder="Author" name = "author" id="author" required data-validation-required-message="Please enter your phone number.">
              <p class="help-block text-danger"></p>
            </div>
          </div>
          <div class="control-group">
            <div class="form-group floating-label-form-group controls">
              <label>Blog Content</label>
              <textarea rows="5" class="form-control" placeholder="Blog content" name = "content" id="content" required data-validation-required-message="Please enter a message."></textarea>
              <p class="help-block text-danger"></p>
            </div>
          </div>
          <br>
          <div id="success"></div>
          <button type="submit" class="btn btn-primary" id="sendMessageButton">Send</button>
        </form>
      </div>
    </div>
  </div>

  <hr>

  <!-- Footer -->
  <footer>
    <div class="container">
      <div class="row">
        <div class="col-lg-8 col-md-10 mx-auto">
          <!-- Qua inizia la parte inferiore-->
          <p class="copyright text-muted">Copyright &copy; Your Website 2020</p>
        </div>
      </div>
    </div>
  </footer>

          

  <!-- Bootstrap core JavaScript -->
  <script src= "{{ url_for('static', filename = 'jquery.min.js')}}"> </script>
  <script src= "{{ url_for('static', filename = 'bootstrap.min.js')}}"></script>
  

  <!-- Custom scripts for this template -->
  <script src="{{ url_for('static', filename = 'clean-blog.min.js')}}"> </script>>

</body>

</html>

但是有没有办法在帖子内容中嵌入图片？或者也许我应该选择另一种方式来同时显示文本和图像？非常感谢您，每一个建议都将不胜感激！

【问题讨论】：

标签： python sqlite flask

【解决方案1】：

首先，您需要一种上传图片的方法。您可以通过多种方式做到这一点； Stack Overflow 使用指向托管图像的链接，这些图像使用 img 标记的 src 属性呈现。或者您可以让您的用户上传图片。

一旦您验证了选择的图像（如果正在上传），您应该将其添加到您的烧瓶静态文件夹中，或者从您提供静态文件的任何位置添加一个类似这样的字段到您的 db.Model ：

image_path = db.Column(db.String(128)) # swap 128 for something suitable to your path length

然后，您可以使用 HTML img 标记及其属性 src 从您的服务器获取图像，如下所示：

<h1>{{ blog.author.name }} says: </h1>
<h2>{{ blog.title }}</h2>
<p>
    {{ blog.content }}
</p>
<img src="{{ blog.image_path }}">

【讨论】：

我不确定如何从添加页面中的“博客内容”填写表单中调用图像，这已经是动态的。如果我想要组合 text-image-text-image，我该如何在文本内容中做到这一点？或者我可以直接在添加页面中使用 img 标签吗？问题是我的帖子会直接保存在数据库中。
啊，所以您希望您的帖子内容实际包含图像？这很难做到，因为不是像文档那样处理原始纯文本，而是需要解析帖子正文中图像的路径字符串，并确保它实际上被渲染为图像而不是而不是作为一个字符串说明图像在哪里。您可以使用标记 (get started here) 获取图像标签并将其转换为实际图像