Я использую приложение фляги, которое работает на моем компьютере (локальный сервер). Я хочу выполнить эту задачу:
Пользователь выбирает изображение, и это изображение отображается в шаблоне.
Я не хочу загружать файл изображения в какую-либо папку. Ответы на многие вопросы основаны на том, как пользователь выбирает изображение и загружает его в другую папку.
Вместо этого все, что я хочу сделать, это получить изображение из формы ввода и отобразить его в браузере.
Я упомянул ряд ресурсов:
1. https://www.youtube.com/watch?v=Y2fMCxLz6wM
2. Как передать загруженное изображение в template.html во Flask
3. Публикация значений из формы HTML и доступ к ним в представлении Flask
Однако все они в основном упоминают о загрузке изображений в папку перед отображением
Это мой main.py
@app.route("/")
def index():
return render_template('index.html')
@app.route("/display", methods=['POST', 'GET'])
def display():
filename = request.form.get("file")
return render_template("display.html", image_name=filename)
index.html
<form id="display-img" action="http://localhost:5000/display" enctype=multipart/form-data method="POST">
<p>Image Select
<input type="file" name="file" accept="image/*"></p>
<button>SUBMIT</button>
</form>
display.html
<body>
{% extends "template.html" %}
{% block content %}
<h1> Displayed here </h1>
<img id="blah" src=" {{ url_for('display', file=image_name)}}">
{% endblock %}
<script>
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
$('#blah').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
$("#imgInp").change(function() {
readURL(this);
});
</script>
Фактический результат:
Пользователь должен иметь возможность выбрать изображение из папки (index.html). Когда я нажимаю "Отправить", шаблон display.html обрабатывается, но изображение представляет собой символ неработающей ссылки
То, что я ожидаю, это:
Пользователь должен иметь возможность выбрать изображение из папки (index.html). Когда я нажимаю «Отправить», он отображается для отображения страницы (display.html).
Я пробовал разные способы передачи переменной имени изображения в путь отображения, но я все еще не получаю изображение, отображаемое правильно.
Вот так выглядит отрисованная страница
edit: добавлен код для JS в display.html