图像不会加载到 static 文件夹中的 flask 中

Question

I'm trying to load two images into my html when the 'next' button is clicked. Before I tried to connect all of my front end to flask, it worked fine. The css and js files are working just fine, but the images won't load. What happens is when the button is pressed, the js swaps out the old html in the main div with the new, which contains images (you can see this in the update() function). All of the js, css and images are in the static folder. Any help would be appreciated. Edit: extra info: It's throwing a 404 error saying it cannot locate the images in a folder called Images, even though I'm not asking it to look for them in that, I'm only asking it to look in the static folder. github repo: https://github.com/ewanh26/Web-App Code:

main.py:

from flask import *
    
app = Flask(__name__)
    
@app.route("/")
def index():
    return render_template('index.html')
    
if __name__ == '__main__':
    app.run(debug=True)

index.js:

<!-- language: lang-js -->

    let pageCounter = 0;
    let maxPages = 5

    const $prevButton = document.getElementById('prev')
    const $nextButton = document.getElementById('next');
    const $div = document.getElementById('maindiv')

    function update() {    
        switch (pageCounter) {
            default:
                $div.className = 'slide1Header';
                $($div).html("<h1>THE WORLD OF TOMORROW. WHAT'S NEXT FOR US?</h1>");
                break;
            case 1:
                $div.className = 'slide2';
                $($div).html(`
                <img src="{{ url_for('static', filename='starry.jpg') }}" alt="stars" id="starimg">
                <img src="{{ url_for('static', filename='moon.png') }}" alt="moon" id="moonimg">
                `);
                break;
        }
    }

    update();

    $prevButton.addEventListener('click', function () {
        if (pageCounter > 0) {
            pageCounter--;
            console.log(pageCounter);
            update();
        }
    });
    $nextButton.addEventListener('click', function () {
        if (pageCounter < maxPages) {
            pageCounter++;
            console.log(pageCounter);
            update();
        }
    });

    window.addEventListener('scroll', function () {
        document.body.style.setProperty('--scroll', window.pageYOffset / (document.body.offsetHeight - window.innerHeight));
    });

style.css
<!-- language: lang-css -->

    html, body {
        font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
        margin: 0;
        padding: 0;
        height: 100%;
        width: 100%;
    }
    .slide1Header {
        display: flex;
        justify-content: center;
        align-items: center;
        position: fixed;
        font-style: italic;
        width: 100%;
        height: 100%;
        background: linear-gradient(-45deg,
        #bd33c4,
        #DE498E, 
        #FF5F58, 
        #FC9144, 
        #f8c330e1, 
        #FBAB19, 
        #FD9301, 
        #FE4A2B, 
        #FF0055
        );
        background-size: 2000% 2000%;
        animation: backgroundChange 15s ease infinite;
        transform: none;
    }
    .slide2 {
        background: black;
    }
    #starimg {
        display: block;
        width: 50%;
        margin-left: auto;
        margin-right: auto;

    }
    #moonimg {
        display: block;
        width: 30px;
        height: 30px;
        top: 17px;
        right: 33%;
        left: 66%;
        position: absolute;
        filter: brightness(5);
        filter: contrast(0);
        filter: blur(0.7px);
        filter: opacity(0.95);
        animation: moonScroll 0.5s linear infinite;
        animation-play-state: paused;
        animation-delay: calc(var(--scroll) * -1s);
        transform: rotate(-40deg);
        transform-origin: 0px 500px;
    }
    #moonimg::before {
        transform: rotate(-30deg);
    }
    button.prev, button.next {
        border-radius: 8px;
        position: fixed;
        transition-duration: 0.4s;
        border-color: white;
        border-style: none;
        padding: 4pt;
    }
    button.prev {
        left: 5%;
        bottom: 5%;
    }
    button.next {
        right: 5%;
        bottom: 5%;
    }
    .prev:hover, .next:hover, .prev:focus, .next:focus {
        background-color: #ff245b;
        color: white;
        outline: none;
    }
    @keyframes backgroundChange {
        0% {
            background-position: 0 50%;
        }
        50% {
            background-position: 100% 50%;
        }
        100% {
            background-position: 0 50%;
        }
    }
    @keyframes moonScroll {
        from {
            transform: rotate(0deg);
        }
        to {
            transform: rotate(-90deg);
        }
    }

index.html
<!-- language: lang-html -->

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
            <!--<link rel="preload" as="image" href="{{ url_for('static', filename='starry.jpg') }}">
            <link rel="preload" as="image" href="{{ url_for('static', filename='moon.png') }}">!-->
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
            <title>The Future</title>
        </head>
        <body>
            <div id="maindiv"></div>
            <button class="prev" id="prev">&larr; Previous</button>
            <button class="next" id="next">Next &rarr;</button>
            <script src="{{ url_for('static', filename='index.js') }}"></script>
        </body>
    </html>

index.js

    let pageCounter = 0;
    let maxPages = 5
    
    const $prevButton = document.getElementById('prev')
    const $nextButton = document.getElementById('next');
    const $div = document.getElementById('maindiv')
    
    function update() {    
        switch (pageCounter) {
            default:
                $div.className = 'slide1Header';
                $($div).html("<h1>THE WORLD OF TOMORROW. WHAT'S NEXT FOR US?</h1>");
                break;
            case 1:
                $div.className = 'slide2';
                $($div).html(`
                <img src="{{ url_for('static', filename='starry.jpg') }}" alt="stars" id="starimg">
                <img src="{{ url_for('static', filename='moon.png') }}" alt="moon" id="moonimg">
                `);
                break;
        }
    }
    
    update();
    
    $prevButton.addEventListener('click', function () {
        if (pageCounter > 0) {
            pageCounter--;
            console.log(pageCounter);
            update();
        }
    });
    $nextButton.addEventListener('click', function () {
        if (pageCounter < maxPages) {
            pageCounter++;
            console.log(pageCounter);
            update();
        }
    });
    
    window.addEventListener('scroll', function () {
        document.body.style.setProperty('--scroll', window.pageYOffset / (document.body.offsetHeight - window.innerHeight));
    });

Answer 1

Managed to fix it myself just by using the normal file path rather than creating a url with url_for() in the javascript file.