Images won't load in flask in static folder

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));
    });

166 thoughts on “Images won't load in flask in static folder”

  1. Hello! I just wanted to ask if you ever have any trouble with hackers?
    My last blog (wordpress) was hacked and I ended up losing many months of hard work due to no back
    up. Do you have any methods to protect against hackers?

    Reply
  2. Wow, wonderful blog format! How long have you
    ever been blogging for? you made blogging glance easy. The whole
    glance of your website is great, as neatly as the content material!

    Reply
  3. Wonderful blog! I found it while browsing on Yahoo News.
    Do you have any tips on how to get listed in Yahoo News? I’ve been trying for a while but I never seem to get there!

    Thank you

    Reply
  4. Do you mind if I quote a couple of your articles as long as I provide credit
    and sources back to your blog? My blog is in the very same area of interest as
    yours and my visitors would definitely benefit from some of the information you present here.

    Please let me know if this alright with you. Many thanks!

    Reply
  5. At this time it seems like Movable Type is the top blogging platform available right now.
    (from what I’ve read) Is that what you’re using on your blog?

    Reply
  6. Hey would you mind letting me know which webhost
    you’re using? I’ve loaded your blog in 3 different browsers
    and I must say this blog loads a lot quicker then most.
    Can you suggest a good hosting provider at a honest price?

    Thanks a lot, I appreciate it!

    Reply
  7. Hello there, just became aware of your blog through Google,
    and found that it’s really informative. I’m going to watch out for brussels.

    I will appreciate if you continue this {in future}.
    Many people will be benefited from your writing. Cheers!

    Reply
  8. Nice blog here! Additionally your web site loads up fast!
    What host are you using? Can I am getting your associate link to your host?
    I desire my website loaded up as fast as yours lol

    Reply
  9. When someone writes an article he/she maintains the image of a user in his/her mind that how a user can be aware of it.
    Thertefore that’s why this post iss perfect.
    Thanks!

    Also visit my web-site: Cam4

    Reply

Leave a Comment