Блог

Главная - Вопросы по программированию - локально загруженное изображение с помощью flask не будет отображаться на другой странице

локально загруженное изображение с помощью flask не будет отображаться на другой странице

#javascript #html #jquery #flask #tinymce

Вопрос:

То, что я пытаюсь сделать:

  1. загрузите локальные изображения (005.jpg) из каталога клиента через TinyMCE (userprofile.html) в каталог моего локального хост-сервера
  2. сохраните «html» версию текстов и изображений внутри TinyMCE как 3_intro.txt

*в 005.jpg предполагается, что он будет сохранен как

img src=»./static/photo/userprofile_upload/005.jpg»

«.» находится в каталоге бета-версии, так как колба app.py помещается там

  1. Показывает, что 3_intro.txt на intro_trace.html с изображением(005.jpg) источник, на который ссылаются из каталога локального сервера

Проблема:

  1. Фактический img src, упомянутый в TinyMCE, и intro_trace.html отличается от каталога, который я настроил вручную, он становится :

img src=»static/photo/uploads/005.jpg» (без начального «./») (этот img src в представлении кода TinyMCE и 3_intro.txt это точно то же самое)

  1. В 005.jpg может быть показано в текстовом редакторе TinyMCE (включая представление кода, которое уже ссылается на изображение из каталога локального сервера моего хоста), но оно не может быть показано через intro_trace.html хотя у них один и тот же тег img src
  2. intro_trace.html возвращается с ошибкой «Не удалось загрузить ресурс: сервер ответил со статусом 404 (НЕ НАЙДЕН)»

Из того, что я видел через консоль ошибок, веб-сайт пытался получить изображение из http://localhost:5000/trace/static/photo/userprofile_upload/005.jpg в то время как он должен был быть получен из http://localhost:5000/static/photo/userprofile_upload/005.jpg (без следа) Это вызвано тем, что маршрут ввода /трассировка/ввод, поэтому он автоматически добавляет «/трассировку» в URL-адрес источника изображения.

How do I change the URL specifically so that the image won’t be sourced through the «/trace» URL?

Below, I provide some pictures as reference

TinyMCE rich text-editor

TinyMCE code view

intro_trace.html amp; error

Website Directory

 /home | /dash | | /beta | | | app.py | | | /static | | | | /photo | | | | | /uploads | | | | | 005.jpg | | | | /introduction | | | | | 3_intro.txt | | | /templates | | | | intro_trace.html | | | | userprofile.html | | | /custom_modules | | | | user_profile.py | | | | /trace_gacp_modules | | | | | show_intro.py

app.py

 app = Flask(__name__)  app.register_blueprint(user_profile.user_profile) app.register_blueprint(show_intro.show_intro)  @app.route('/userprofile', methods=['GET']) @required_login def userprofile():  if session.get("is_superuser") != 4:  return render_template('userprofile.html')  else:  id = session.get("id")  INFO = (g.session  .query(db.models.INFO)  .filter(db.models.INFO.id == id)  .first())  file_name = str(id) "_intro.txt"  intro_path = "./static/introduction/" file_name  try:  intro = open(intro_path, mode="r ", encoding='utf-8')  with intro:  intro_out = intro.read().replace('n', '').replace(''', '\'').replace(  'lt;pgt;lt;audio style="display: none;" controls="controls"gt;lt;/audiogt;lt;/pgt;', '')  intro.close()  except:  intro_out = ""  return render_template('userprofile.html', intro=intro_out)   UPLOAD_FOLDER = 'static/photo/uploads' app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER   ALLOWED_EXTENSIONS = set(['png', 'jpg', 'jpeg', 'gif'])  def allowed_file(filename):  return '.' in filename and filename.rsplit('.', 1)[1].lower() in ALLOWED_EXTENSIONS  @app.route("/upload", methods=["POST","GET"]) def upload():   if request.method == 'POST':  file = request.files['file']  filename = secure_filename(file.filename)    if file and allowed_file(file.filename):  file.save(os.path.join(app.config['UPLOAD_FOLDER'], filename))  print('File successfully uploaded '   file.filename   ' to '   UPLOAD_FOLDER)  else:  print('Invalid Upload only png, jpg, jpeg, gif')   return jsonify(filename)

user_profile.py

 from flask import Blueprint, abort, g, session, request, jsonify, redirect from custom_modules.main_modules.decorators import required_login, required_user from custom_modules.main_modules import db, utils  user_profile = Blueprint('user_profile', __name__)  @user_profile.route('/api/intro', methods=['POST']) @required_user def introduction():  id = request.form.get('id')  intro = request.form.get('intro')   if intro is None:  abort(405)   file_name = str(id) "_intro.txt"  intro_path = "./static/introduction/" file_name  intro = open(intro_path, mode="w", encoding='utf-8')  print(intro, file=intro)  intro.close()   (g.session  .query(db.models.INFO)  .filter(db.models.INFO.id == id)  .update({"introduction": intro_path}))  g.session.commit()   return redirect('/userprofile')

userprofile.html

 {% extends 'base/base.html' %}  {% block page_content %}  lt;divgt;  lt;form method="post" action="/api/intro" enctype="multipart/form-data"gt;  lt;input type="hidden" class="user-control" id="id" name="id" v-model="users.id"gt;  lt;textarea id="intro_container" name="intro" maxlength="65535"gt;lt;/textareagt;  lt;/formgt; lt;/divgt; {% endblock %}  {% block page_script %} lt;script src="/static/tinymce/tinymce.min.js"gt;lt;/scriptgt; lt;scriptgt; tinymce.init({  selector: '#intro_container',  plugins: "image code preview autoresize autosave save",  toolbar: "undo redonewdocument bold italic underline strikethrough alignleft aligncenter alignright fontselect fontsizeselect forecolor backcolor image save | image_upload",  image_caption: true,  custom_colors: true,  branding: false,  image_class_list: [  {title: 'Responsive', value: 'img-responsive'}  ],  setup: function(picture) {    var fileInput = $('lt;input id="tinymce-uploader" type="file" name="pic" accept="image/*" style="display:none"gt;');  $(picture.getElement()).parent().append(fileInput);    fileInput.on("change",function(){   var file = this.files[0];  var reader = new FileReader();   var formData = new FormData();  var files = file;  formData.append("file",files);  formData.append('filetype', 'image');   jQuery.ajax({  url: "/upload",  type: "post",  data: formData,  contentType: false,  processData: false,  async: false,  success: function(response){  var fileName = response;  if(fileName) {  picture.insertContent('lt;img src="./static/photo/uploads/' fileName '"/gt;');  }  }  });   reader.readAsDataURL(file);   });   picture.ui.registry.addButton('image_upload', {  tooltip: 'Upload Image',  text: 'Upload',  onAction: function () {  fileInput.trigger('click');  }  });  }  }); lt;/scriptgt;

show_intro.py

 from flask import Blueprint, abort, g, request from custom_modules.main_modules.custom_render_templates import flask_render_template from custom_modules.main_modules import db  show_farm_intro = Blueprint('show_intro', __name__)  @show_farm_intro.route('/trace/intro', methods=['GET']) def trace_intro():  farm_id = request.args.get("no")  if not id:  abort(404)  INFO = (g.session  .query(db.models.INFO)  .filter(db.models.INFO.id == int(id))  .first())  file_name = str(id) "_intro.txt"  intro_path = "./static/introduction/" file_name  try:  intro = open(intro_path, mode="r ", encoding='utf-8')  with intro:  intro_out = intro.read().replace('n', '').replace(''', '\'').replace(  'lt;pgt;lt;audio style="display: none;" controls="controls"gt;lt;/audiogt;lt;/pgt;', '')  intro.close()  except:  intro_out = ""  return flask_render_template('intro_trace.html',  name=INFO.name,  intro=intro_out)

intro_trace.html

 lt;div class="content-wrapper" style="margin-left:0px;"gt;  lt;section class="content"gt;  lt;div class="container"gt;  lt;div class="row"gt;  lt;div class="col-xs-12 text-center"gt;  {% if name %}  lt;h2gt;{{name}}lt;/h2gt;  {% else %}  lt;h2gt;Please register firstlt;/h2gt;  {% endif %}  lt;/divgt;  lt;/divgt;  lt;div class="row"gt;  lt;div class="col-xs-12" id="intro_container"gt;  lt;/divgt;  lt;/divgt;  lt;/divgt;  lt;/sectiongt; lt;/divgt; lt;scriptgt;  if ('{{intro}}'){  $("#intro_container").html('{{intro| safe}}')  }else{  $("#intro_container").html('lt;h3gt;No Introlt;h3gt;')  } lt;/scriptgt;
Метки: