Some links on this page are affiliate links: if you buy through them we may earn a commission, at no extra cost to you.
Put the image URL in an <img> element’s src attribute. A relative path is resolved from the loaded HTML document’s URL (or its base URL): use photo.jpg for a file beside the page, images/photo.jpg for a child folder, and ../photo.jpg to move up one folder. A path beginning with /, such as /images/photo.jpg, starts at the website’s server root instead.
Choose a path based on where the image is
These examples assume the HTML file is served from a URL whose directory matches the folders shown. Use forward slashes in HTML paths, including when you manage files on Windows.
Path in src |
Where the browser looks | Example result for a page at https://example.com/products/index.html |
|---|---|---|
photo.jpg |
In the current document directory | https://example.com/products/photo.jpg |
./photo.jpg |
In the current document directory; ./ makes that explicit |
https://example.com/products/photo.jpg |
images/photo.jpg |
In a child directory named images |
https://example.com/products/images/photo.jpg |
../photo.jpg |
One directory above the current directory | https://example.com/photo.jpg |
/images/photo.jpg |
At the server root of the current origin | https://example.com/images/photo.jpg |
For a simple project, keep the image in or below the site folder and use a relative path. That makes it easier to move the site as a unit. Choose a root-relative path when the image is deliberately located from the site root and that root is stable. If the image is hosted on another site, use its full absolute URL and make sure you have permission to use it.
The Tool Desk
Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Write the HTML and match the folder layout
Suppose your project has this structure:
site/
├── index.html
├── photo.jpg
└── images/
└── logo.png
With index.html in the project root, reference the neighboring photo and the image in the child folder like this:
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
<img src="photo.jpg" alt="A mountain at sunrise">
<img src="images/logo.png" alt="Acme site logo">Now suppose a different HTML file is inside a pages folder:
site/
├── photo.jpg
└── pages/
└── gallery.htmlFrom gallery.html, go up once to reach photo.jpg:
<img src="../photo.jpg" alt="A mountain at sunrise">Each ../ moves up one directory in the URL path. For an image two levels up, use ../../photo.jpg; for an image in a sibling folder, combine the upward step with the folder name, such as ../images/photo.jpg. The number of steps must match the actual URL folder depth, not how deeply nested the project feels in a file manager.
Use a root-relative path deliberately
A leading slash does not mean “from the folder containing this page.” It means “from the root of this site.” Therefore /images/photo.jpg resolves to https://example.com/images/photo.jpg whether the current page is /, /products/, or /products/sale/. On a site published under a subdirectory, such as https://example.com/store/, a leading slash still points to the domain root, not /store/. That distinction is a common reason for a path to work on a root-hosted development server but fail under a deployment subdirectory.
Crashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minuteWindows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstallKnow what URL the browser uses as its base
The browser resolves relative references as URLs, using the loaded document’s URL and directory rules; it does not simply append text to a string or inspect your computer’s source folder. Moving the HTML file can therefore change where the same src value points.
For example, on a document loaded as https://example.com/products/index.html, images/photo.jpg requests https://example.com/products/images/photo.jpg. If that document instead loads as https://example.com/pages/gallery.html, the same path requests https://example.com/pages/images/photo.jpg. The relative path is unchanged, but its base directory is different.
Pay attention to the final URL in the address bar, including redirects and trailing slashes. A page served at a directory URL such as /products/ and a page served at a URL such as /products/index.html may render the same content, but the URL path determines how relative references resolve. Framework routes can make the visible page location differ from a local HTML file’s location, so verify the actual requested image URL rather than guessing from source layout.
Rank #4
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
When a base URL is set
An HTML document can set a base URL with a <base href="..."> element in its <head>. When present, that base changes how relative URLs in the document are resolved. If a path seems correct relative to the page but the browser requests it elsewhere, search the HTML or template for a <base> element and account for its value. Do not add one just to fix a single broken image unless you intend to change the base for the document’s relative links and resources more broadly.
Recommended Free Tools
Debug a broken image systematically
- Find the loaded page URL. Use the URL the browser actually loaded, not merely the file’s location on your computer. Note redirects, route prefixes, deployment subdirectories, and whether the URL has a trailing slash.
- Calculate the expected image URL. Apply the path rules: no prefix or
./uses the current directory, each../moves up one directory, and a leading/starts at the site root. Check for a document<base>that overrides the usual base. - Inspect the failed request in browser developer tools. Open the Network panel, reload the page, select the failed image request, and compare its requested URL with the deployed image’s URL. This reveals whether the browser looked in the wrong folder or requested the right location and received an error.
- Check the deployed name exactly. Match every directory, filename, and extension. On case-sensitive servers,
Photo.jpgandphoto.jpgare different paths even if they appear equivalent on a local machine. - Check the path separators. Use
/in HTML. A Windows filesystem path such asimagesphoto.jpgis not the URL-style path to put insrc; writeimages/photo.jpg. - Check the deployment layout. Confirm the image was included in the published output at the location you calculated. Build tools, static-site generators, and deployment settings can copy assets to a different output folder than the source folder.
- Fix the base mismatch, then reload. If the request URL is wrong, adjust the relative path or choose a root-relative path if appropriate. If the URL is right but the file is not there, correct the deployed location or filename. Reload and verify the new request.
Common symptoms and fixes
- Works on the home page but not on nested pages: a relative path may be resolving from each page’s directory. Use the correct number of
../segments, or a root-relative path if the asset belongs at the site root. - Works locally but fails after deployment: compare the browser’s requested URL with the deployed file URL. Check case, extension, output-folder placement, and whether the site is hosted below a domain subdirectory.
- The request goes to the domain root unexpectedly: remove the initial slash if you meant a path beside the page.
/images/photo.jpgis root-relative;images/photo.jpgis relative to the current directory. - The browser requests an unexpected folder: inspect the final document URL and any
<base href>before changing the path. Either can make the assumed base incorrect. - The file exists but still does not load: verify exact letter case and extension in the deployed URL, then inspect the request response and address the server-side or deployment issue shown there.
Write useful, stable image markup
A useful image needs alternative text as well as a working path. Put a concise description of the image’s purpose in alt; if an image is purely decorative and adds no information, use an empty value, alt="", rather than omitting the attribute. The text is the replacement for people who cannot see the image and is also used when it cannot load.
Best Value
When you know an image’s display dimensions, include width and height. The browser can reserve space while the image loads, helping prevent the surrounding page from jumping. For example:
<img src="images/mountain.jpg" alt="A mountain ridge at sunrise" width="1200" height="800">For a page that offers multiple image sizes, srcset and sizes can let the browser select an appropriate responsive variant. The fallback src remains a URL and follows the same resolution rules. Keep the file names and directory structure for every candidate accurate, and test at the page URLs and viewport sizes your site supports. If the images are served through a content delivery network, use the URL form and domain provided by that setup rather than assuming a local relative path will reach it.
Or skip the browser setup
If you need a rendered screenshot to inspect how a page and its image appear, ScreenshotNeo can capture a URL through one API request. It does not replace correcting an image path in your HTML. The call below captures the page at https://stripe.com; replace that target URL with your own page and use your API key. See the ScreenshotNeo API documentation for request options.
Do these 3 things before closing this tab:
1Scan for outdated or missing drivers - takes under a minute2Clear out junk files and repair common Windows errors3Fix the driver behind crashes, sound loss and screen glitchescurl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webp- Cookie and consent banners are accepted before capture; more than 60 known consent platforms, newsletter popups, and chat widgets can be removed, and each of these steps can be turned off.
- Bot checks or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits cost nothing; response headers identify the page verdict and whether the request was billed.
- An MCP server provides
take_screenshot,get_page_info, andcapture_pdftools for Claude, Cursor, and other MCP clients. - The Free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000 screenshots.
Sign up for ScreenshotNeo’s free plan: 1,000 screenshots a month, no card required.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
