Put the image URL in an <img> element’s src attribute. For a file in an images folder beside the HTML file, use:
<img src="images/photo.jpg" alt="Description of the image">The value can be a relative URL such as images/photo.jpg or an absolute URL such as https://example.com/images/photo.jpg. It must point to a file the browser can request from a server; a path that exists only on your computer is not automatically available to visitors.
How the browser resolves an image path
The HTML Standard defines a single-image embed as an img element whose src identifies the image resource. The browser starts with the URL of the HTML document, then resolves a relative src from that location. Consequently, the correct path depends on where the page is located, not just where the image appears in your file manager.
These examples assume the HTML page is named index.html:
The Tool Desk
Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
| File arrangement | src value |
What it means |
|---|---|---|
index.html and photo.jpg in one folder |
photo.jpg |
Look in the same directory as the page. |
index.html beside an images folder containing photo.jpg |
images/photo.jpg |
Enter a child folder, then load the file. |
index.html inside pages/; image is in a sibling images/ folder |
../images/photo.jpg |
.. moves up one directory before entering images. |
The web server’s document root contains images/photo.jpg |
/images/photo.jpg |
Start at the site root. This is root-relative, not relative to the current page. |
| The image is hosted at a stable public address | https://example.com/images/photo.jpg |
Request the complete absolute URL. |
A leading slash has an important consequence: /images/photo.jpg is anchored to the domain’s root. On a site deployed under a subdirectory such as https://example.com/docs/, that root may not be the folder you expect. Use a document-relative path or configure the deployment’s base path deliberately.
Build a predictable project structure
Keeping images in a named folder makes paths easier to inspect and move. A small project might look like this:
my-site/
├── index.html
├── about.html
├── images/
│ ├── logo.svg
│ └── team.jpg
├── styles/
│ └── site.css
└── scripts/
└── site.jsFrom index.html, the team image is images/team.jpg. If about.html is moved into a pages folder, its path becomes ../images/team.jpg. Moving the HTML file changes the relative path even though the image itself did not move.
- Place the asset in the project. Add the image to a folder that your development server and deployment process include.
- Measure from the HTML file. Count how many directories you must leave with
.., then enter the image directory. - Write the element. Include a meaningful
altvalue and, when known, the intrinsicwidthandheight:
<img src="images/team.jpg" alt="Three members of the support team" width="1200" height="800">- Serve the project. Open the page through your local development server or deployed site, then check the requested URL in the browser’s developer tools.
Local file paths are not public image URLs
A value such as C:UsersNamePicturesphoto.jpg or /home/name/photo.jpg describes a file on one computer. A visitor’s browser cannot fetch that private filesystem location from your website. Put the image in a directory exposed by your web server, upload it through your hosting workflow, or use an image URL that is publicly reachable.
Recommended Free Tools
The URL-to-folder mapping is controlled by the server and hosting configuration. For example, a host might expose a project’s public/ directory as the site root, so public/images/photo.jpg is requested in HTML as /images/photo.jpg, not as /public/images/photo.jpg. Check your host’s document-root setting rather than guessing from the computer’s folder names.
Relative URL or full URL?
Use a relative path for images you deploy with the site
Document-relative paths such as images/photo.jpg travel with the page and do not hard-code a domain. They are generally the least fragile choice when you control both the HTML and the image files. They also work when the same site is tested on localhost, a staging domain and production, provided the folder relationship stays the same.
Use a root-relative path when the site root is intentional
/images/photo.jpg is useful when every page should refer to one shared image directory at the domain root. It can fail when the application is hosted below a prefix or when a reverse proxy rewrites paths.
Use an absolute URL for an intentionally external resource
A full URL is appropriate when another service hosts the image and that address is stable and permitted for embedding. Confirm that the host allows cross-site use and that the image will remain available. Relative URLs usually reduce maintenance because changing domains does not require editing every image reference.
Outdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchWindows 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 reinstallAttributes that make an image usable
Write useful alternative text
alt is required for an accessible image description. Describe the information or function conveyed by the image, not every visual detail. For a purely decorative image, use an empty value (alt="") so assistive technology can skip it. If the image fails to load, the alternative text is shown instead.
Reserve layout space with dimensions
Set accurate width and height attributes when possible. The browser can reserve the image’s intrinsic aspect ratio before the bytes arrive, reducing layout movement. Do not use dimensions to distort the image; preserve its ratio with CSS such as height: auto.
Use responsive sources when one file is not enough
A basic image needs only src. For different screen sizes or pixel densities, add srcset and sizes, or use picture with multiple source formats:
<img
src="images/hero-1200.jpg"
srcset="images/hero-600.jpg 600w, images/hero-1200.jpg 1200w, images/hero-2000.jpg 2000w"
sizes="(max-width: 700px) 100vw, 1200px"
alt="A mountain trail at sunrise"
width="2000"
height="1333">Every URL in srcset is resolved using the same directory rules as src. Add responsive markup only when you have alternate resources; it is not a fix for a misspelled basic path.
Free tools Windows power users keep installed
One-click scans. No signup required.
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
Why an image is missing: a systematic checklist
1. Check spelling, extension and capitalization
Compare the exact requested name with the real file. Photo.JPG, photo.jpg and photo.jpeg may be different files, especially on case-sensitive servers. Spaces, punctuation and Unicode characters can also create mismatches. Rename files to simple, predictable names or encode special characters correctly.
2. Resolve the path from the page that is actually open
A path that works in index.html may fail in pages/contact.html. Inspect the page URL in the address bar and calculate the path from that directory. For a quick test, temporarily use a known same-folder image to determine whether the problem is path resolution or serving.
3. Inspect the network request
Open developer tools, select the Network panel, reload the page and filter for the image filename. A 404 usually means the URL does not map to a served file. A 403 indicates a permission or access rule. A request that never reaches the server can point to malformed markup or an invalid URL.
4. Confirm the image was deployed
It is common to add an image locally but omit it from a build, ignore it in version control or upload it to a different directory. Visit the exact image URL directly in a browser. If it does not load there, fix deployment or server configuration before changing HTML.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
5. Check the file type and response
Use an actual image file and ensure the server returns an appropriate image response. A URL ending in .jpg that returns an HTML error page will not render as a photo. Verify redirects, authentication requirements and content-type handling if the request succeeds but the image remains blank.
6. Look for markup and CSS problems
Ensure the img tag is closed correctly and that CSS is not hiding it with display: none, zero dimensions or an overflowing container. A transparent PNG can also appear blank against a similarly colored background.
Licensing, hotlinking and reliability
Publish images only when your license or permission allows it. Linking directly to someone else’s image (hotlinking) makes your page dependent on another site’s availability and bandwidth, and the owner can replace or remove the file. Hosting permitted assets with your site or a suitable CDN gives you control over filenames, caching and retention. Keep an attribution or license record alongside the asset when required.
Or skip the browser setup
If your goal is to obtain a clean image of a web page rather than hand-author an img path, ScreenshotNeo returns a screenshot from one GET request. Its API can produce PNG, JPEG, WebP or PDF, and the documentation lists the available parameters at ScreenshotNeo’s API docs.
Quick Recap
cURL:
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpPython:
import requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"}, timeout=90)
open("shot.webp", "wb").write(r.content)Node.js:
const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);Before capture, ScreenshotNeo can accept cookie or consent banners and remove more than 60 known consent platforms, newsletter popups and chat widgets; each cleanup step can be disabled. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads and cache hits are not billed, and response headers identify the page verdict and billing status. An MCP server provides take_screenshot, get_page_info and capture_pdf tools for Claude, Cursor and other MCP clients. The Free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000 shots, and every feature is available on every plan. Create a free ScreenshotNeo account.
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.
