Łączenie zasobów za pomocą url_for static
Odwołuj się do CSS i JS bez zahardkodowanych ścieżek.
Łączenie zasobów za pomocą url_for static to bezpłatna lekcja Flask Academy na CoddyKit. To lekcja 2 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Flask Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Flask Academy zawiera 4 lekcji w sumie.
Części tej lekcji nie zostały jeszcze przetłumaczone i są wyświetlane po angielsku.
Stop Hardcoding Paths
Writing /static/style.css by hand in every template feels easy, but it is fragile. Flask gives you url_for to build asset links for you. 🔧
The static Endpoint
Flask registers a built-in endpoint named static for your assets. You ask url_for for it instead of typing the raw path yourself.
Pass the Filename
Call url_for with the endpoint and a filename argument. Flask returns the correct URL pointing into your static folder.
url_for("static", filename="style.css")
# -> /static/style.cssUse It in a Template
Inside a Jinja2 template you wrap the call in double braces. The link tag then receives a generated, always-correct href.
<link rel="stylesheet"
href="{{ url_for('static', filename='style.css') }}">Subfolders Work Too
Put the subpath right inside filename. Slashes in the value map straight onto folders within static.
url_for("static", filename="css/style.css")
# -> /static/css/style.cssWhy Bother
If you ever change static_url_path, every url_for link updates itself. Hardcoded paths would all silently break instead.
Correct Prefixes for Free
When your app runs under a sub-path on a server, url_for adds the right prefix automatically, so links keep working everywhere.
Link Your JavaScript
The same call wires up scripts. Point the script tag at url_for and your JS loads from static without a hardcoded path.
<script src="{{ url_for('static', filename='js/app.js') }}"></script>Images the Same Way
Pictures follow the identical pattern. Feed the filename to url_for and drop the result into the img tag source.
<img src="{{ url_for('static', filename='img/logo.png') }}">Call It in Python Too
url_for is not template-only. Inside a view you can call url_for to compute an asset URL and return or log it.
from flask import url_for
link = url_for("static", filename="style.css")One Habit to Keep
Make it a rule: every asset link goes through url_for. Future renames, prefixes, and cache busting then just work for you. ✅
Quick Check
You want a clean link to css/style.css inside static. Which call is right?
Recap: Linking Assets
You now use url_for with the static endpoint to build every asset link, so paths stay correct no matter how config changes. 🎯
Często zadawane pytania
Czy lekcja „Łączenie zasobów za pomocą url_for static” jest bezpłatna?
Tak — pełny tekst „Łączenie zasobów za pomocą url_for static” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Flask Academy, przejdź na CoddyKit PRO. Kurs Flask Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Łączenie zasobów za pomocą url_for static”?
Odwołuj się do CSS i JS bez zahardkodowanych ścieżek. Ćwiczysz Flask Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć Flask Academy?
Nie wymagamy żadnego doświadczenia. Flask Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 2 z 4.
Ile czasu zajmuje lekcja „Łączenie zasobów za pomocą url_for static”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji Flask Academy?
Tak. Każda lekcja Flask Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Konwencja folderu static
- Łączenie zasobów za pomocą url_for static
- Unieważnianie pamięci podręcznej za pomocą wersji plików
- Pliki statyczne w środowisku produkcyjnym