Кто-нибудь знает, как правильно выровнять изображения в библиотеке двадцать двадцать jQuery при использовании flask?

Question

Я пытаюсь создать свой сайт с изображениями слайдера до / после. Я использую плагин TwentyTwenty jQuery.
Плагин TwentyTwenty: https://zurb.com/playground/twentytwenty
Плагин TwentyTwenty на GitHub: https://github.com/zurb/twentytwenty
Flask Библиотека : https://flask.palletsprojects.com/en/1.1.x/

Вот пример кода.

<div id="container1" class="twentytwenty-container">
  <img class='img-fluid rounded' src="img/samuel.jpg" />
  <img class='img-fluid rounded' src="img/samuel(1).jpg"/>
</div>

вот другой код.

<script type="text/javascript">
        $(function(){
            $("#container1").twentytwenty();
        });
        $(function(){
            $(".twentytwenty-container").twentytwenty({
                default_offset_pct: 0.6, // How much of the before image is visible when the page loads
                orientation: 'horizontal', // Orientation of the before and after images ('horizontal' or 'vertical')
                before_label: 'Before', // Set a custom before label
                after_label: 'After', // Set a custom after label
                no_overlay: false, //Do not show the overlay with before and after
                move_slider_on_hover: false, // Move slider on mouse hover?
                move_with_handle_only: true, // Allow a user to swipe anywhere on the image to control slider movement. 
                click_to_move: true // Allow a user to click (or tap) anywhere on the image to move the slider to that location.
            });
        });
</script>

Он работает как шарм когда мы подставляем путь к изображению в самом коде. Вы можете проверить это по ссылке ниже.
https://github.com/harsh-haria/colorization/blob/master/uploads/snip1.PNG
Однако я использую flask и пытаюсь создать динамический c сайт. Мои данные пути поступают через python flask код.
Когда я использую flask, изображения появляются на экране одно под другим, и ползунок не работает, так как изображения находятся не там, где они есть. должны быть. Изображение для этого находится по ссылке ниже.
https://github.com/harsh-haria/colorization/blob/master/uploads/snip2.PNG

Код Flask ниже:

@app.route("/upload-image", methods=["GET", "POST"])
def upload_image():
    global filename, a_main, b_main, image, service1, filter_name, filter_name1, dates
    result={}
    if request.method == "POST":
      if request.files:
        image = request.files["image"]
        filter_name = request.form.get('filter_for_image')
        service1 = str(request.form.get("services"))
        filter_name1 = str(request.form.get("bfilters"))
        print(f"image is {image} service is {service1} Deep Filter is {filter_name} Base Filter is {filter_name1}")
        if image.filename == "":
            print("No filename")
            return redirect(request.url)
        if allowed_image(image.filename):
            filename = secure_filename(image.filename)
            global main_image
            main_image = filename
            a_main,b_main = filename.split(".")
            print(f"filename is {filename}")
            image.save(os.path.join(app.config["IMAGE_UPLOADS"], filename))
            print("Image saved")

            #color
            if(service1=="color"):
                a = color.doit("uploads/{}".format(main_image))
                print('color found')
                return redirect(request.url)
            else:
                print("no color found")

            #dfilter
            if(service1=="dfilter"):
                print('dfilter found')
                print(f"uploads/{main_image} and the filter is {str(filter_name)}")
                p = drop.Filter("uploads/{}".format(main_image),str(filter_name))
                p.dropbox()
                p.algorithmia()
                p.download()
                print('dfilter found 2')

            else:
                print("no dfilter found")
       else:
            print("That file extension is not allowed")
            return redirect(request.url)
    return render_template("index.html",old_image=f"{main_image}",new_image=f"{a_main}(1).{b_main}")

Код, который я использую у меня HTML файл выглядит следующим образом:

<div id="container1" class="twentytwenty-container">
    <img class='img-fluid rounded' src="{{url_for('static',filename=old_image)}}" />
    <img class='img-fluid rounded' src="{{url_for('static',filename=new_image)}}"/> 
</div>