Рендеринг изображения в react js из базы данных flask / sqlalchemy

Question

Привет, друзья по переполнению стека, я обращаюсь к вам с вопросом (вероятно, глупым). У меня сейчас есть база данных flask / sqlalchemy. Это позволяет вам публиковать запись о транспортном средстве со следующей таблицей

class VehicleRecord(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    make = db.Column(db.String(), nullable=False)
    model = db.Column(db.String(), nullable=False)
    miles = db.Column(db.String(), nullable=False)
    year = db.Column(db.String(), nullable=False)
    description = db.Column(db.String(), nullable=False)
    name = db.Column(db.String(), nullable=False)
    file_type = db.Column(db.String(), nullable=False)
    data = db.Column(db.LargeBinary, nullable=False)

@app.route("/vehicle_record/add_vehicle", methods=["POST"])
def add_vehicle_record():
    make = request.form.get("make")
    model = request.form.get("model")
    miles = request.form.get("miles")
    year = request.form.get("year")
    description = request.form.get("description")
    name = request.form.get("name")
    file_type = request.form.get("type")
    data = request.files.get("data")
    
    if data is None:
        return jsonify("Missing File!")
    
    record = VehicleRecord(make, model, miles, year, description, name, file_type, data.read())
    db.session.add(record)
    db.session.commit()
    
    return jsonify("Vehicle Record added successfully")

. Она отлично работает, вы заполняете форму вместе с загрузкой файла вместе с записью и успешно публикуете запись. Однако когда приходит время рендеринга записи вместе с изображением, все, что я получаю, - это маленький значок фотографии с альтернативным именем. У меня вопрос: правильно ли я использую способ хранения файлов? Есть ли способ вывести изображение? Я ценю любую обратную связь. Ребята, молодцы!

 buildForm() {
    let formData = new FormData();

    formData.append("make", this.state.make);
    formData.append("model", this.state.model);
    formData.append("miles", this.state.miles);
    formData.append("year", this.state.year);
    formData.append("description", this.state.description);
    formData.append("name", this.state.file.name);
    formData.append("type", this.state.file.type);
    formData.append("data", this.state.file);

    return formData;
  }

  handleSubmit(event) {
    axios
      .post(
        "http://127.0.0.1:5000/vehicle_record/add_vehicle",
        this.buildForm()
      )
      .then((response) => {
        console.log("response", response);
      })
      .catch((error) => {
        console.log("handle submit error", error);
      });

    event.preventDefault();
  }

          <div className="vehicle-info">
            <h1>Vehicle Record</h1>
            <p>Here you will find all vehicle records in database</p>
            {data.map((data => <div className="vehicle-record-wrapper">
              <h1>Vehicle Record{data.id}</h1>
             <p>{data.description}</p>
             <p>Make:{data.make}</p>
             <p>Model:{data.model}</p>
             <p>Range:{data.miles}</p>
             <p>Year:{data.year}</p>
             <img src={data.file_type} alt="vehicle-image" />
              </div>))}