Add an image in an HTML file by placing an <img> element in the page body and putting the image URL or path in its src attribute. Add useful alt text, then preview the page in VS Code’s Integrated Browser:
<img src="images/photo.jpg" alt="A description of the photo">The basic HTML syntax
The src value identifies the image resource. It can be a path to a file in your project or a complete URL hosted on another site. The alt value is the text alternative for people who use assistive technology and for cases where the image cannot load.
<img src="images/photo.jpg" alt="A description of the photo"><img> is a void HTML element, so it has no closing </img> tag. Put the element wherever the image should appear, normally inside <body>.
Add an image stored in your project
- Open the project folder in VS Code with File → Open Folder.
- Create an image folder such as
images, or locate the folder that already contains the image. - Open the HTML file you want to edit.
- Insert an
<img>element and setsrcto the path from that HTML file to the image. - Save the file and open it in VS Code’s Integrated Browser to check the rendered result.
Image beside the HTML file
If index.html and logo.png are in the same directory, use the filename:
Do these 3 things before closing this tab:
1Repair Windows errors before they cause bigger problems2Fix the driver behind crashes, sound loss and screen glitches3Clear out junk files and repair common Windows errors#1 Best Overall
<img src="logo.png" alt="Company logo">Image in a subfolder
For this structure:
project/
├─ index.html
└─ images/
└─ photo.jpgthe correct element in index.html is:
<img src="images/photo.jpg" alt="A description of the photo">Moving up a directory
If the HTML file is in a subfolder, use .. for each directory level you need to move up. For example:
project/
├─ images/
│ └─ photo.jpg
└─ pages/
└─ about.htmlIn pages/about.html, reference the image with:
<img src="../images/photo.jpg" alt="About our team">The browser resolves a relative path from the page’s URL or location. VS Code does not repair an incorrect path at runtime, so count the folders from the HTML file itself.
Use an image hosted at a full URL
For an externally hosted image, put its complete HTTPS address in src:
<img src="https://example.com/images/banner.jpg" alt="Product banner">The URL must point directly to an image resource that the browser can reach. A normal web-page URL, a search-result URL, or a link that requires an interactive download is not necessarily an image URL. Test the address by opening it directly in a browser; you should see the image itself.
Remote images can disappear or move without notice. For a site you control, hosting the asset yourself and using a relative path is generally easier to maintain when the site domain changes. Do not hotlink an image you do not have permission to use. Check its license or obtain permission before publishing it.
Rank #2
Choose accurate alternative text
Write alt text that communicates the image’s relevant meaning, not its filename. For example:
<img src="images/team.jpg" alt="Four developers reviewing code around a table">If the image is purely decorative and conveys no information, use an empty value:
<img src="images/divider.svg" alt="">Do not omit alt on a meaningful image. Screen readers can announce the alternative, and browsers can display it when the resource fails to load.
Quick wins for a faster PC:
Scan for outdated or missing drivers - takes under a minuteDriver Scan →Clear out junk files and repair common Windows errorsFree Scan →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Preview the result in VS Code
VS Code includes HTML syntax highlighting, IntelliSense and Emmet support, plus an Integrated Browser preview. After saving your file, open the preview and confirm that the image appears at the expected size and location. The preview helps you inspect the rendered page; it does not host or upload the image.
- Open the HTML file in VS Code.
- Use the Integrated Browser preview command available in your installation.
- Edit the
srcoraltvalue, save, and refresh or let the preview update. - Use the browser’s developer tools if you need to inspect the requested URL and the resulting error.
Fix an image that does not appear
Check the path from the HTML file
Start at the directory containing the HTML page, then follow the folders named in src. A path that is correct for another page or for your operating system’s file explorer may be wrong for this page.
Check spelling, capitalization and extension
Verify every character in the filename and folder name, including uppercase and lowercase letters. Confirm that the extension is really .jpg, .jpeg, .png, .gif, .svg or the format you intended; renaming a file in the editor does not change its actual format.
Confirm the resource is reachable
For a remote image, open the exact URL directly. For a local image, confirm that the file is inside the project folder and that the relative path matches its location. A missing file commonly results in a broken-image indicator and the alt text.
Free tools Windows power users keep installed
One-click scans. No signup required.
Look for accidental URL characters
Remove unintended spaces or quotation marks from the attribute. Keep the complete value inside matching quotes:
<img src="images/photo.jpg" alt="A description">Distinguish a page URL from an image URL
If opening the address displays an HTML page, login screen or download interface rather than the image, it is not a direct image resource for this simple use. Find the permitted direct asset URL or download and host the image in your project.
Local path or remote URL?
| Choice | Example | Maintenance and deployment considerations | Permission responsibility |
|---|---|---|---|
| Local, same folder | src="logo.png" |
Simple, but the file must remain beside the HTML page. | You must have the right to use the file. |
| Local, subfolder | src="images/logo.png" |
Organized and portable when the project moves as a unit. | You control the hosted asset and its license. |
| Remote HTTPS URL | src="https://example.com/logo.png" |
Convenient for a quick example, but the owner can move, remove or restrict it. | Permission and license still apply; avoid unauthorized hotlinking. |
For a production site, a project-controlled relative path is usually the more maintainable choice when practical. An external URL is useful when the image is intentionally hosted elsewhere and its availability and usage rights are understood.
Optional improvements for real pages
Responsive images
When a page needs different image files for different screen sizes, HTML also supports srcset and sizes. They are not required for adding one image URL, so start with a correct src and alt value before adding responsive variants.
Control displayed dimensions
Use CSS for layout rather than changing the file path. A simple class keeps presentation separate from the resource reference:
<img class="hero" src="images/hero.jpg" alt="Mountain trail at sunrise">.hero {
max-width: 100%;
height: auto;
}Use an appropriate asset format
Keep the URL and format consistent with the actual file. If you convert an image from PNG to WebP, update both the filename and the src value. A format mismatch can look like a path problem even when the folders are correct.
Do not confuse normal HTML with an extension webview
The workflow above is for an ordinary HTML page that you edit and preview. VS Code extension authors have a separate webview environment. When an extension loads local files into a webview, its code must convert resource URIs with Webview.asWebviewUri. That webview-specific API is not required for a normal HTML file in your project.
Or skip the browser setup
If your goal is to obtain a clean screenshot of a page rather than manually place an existing asset, ScreenshotNeo can return a PNG, JPEG, WebP or PDF from one request. It accepts consent banners before capture and removes more than 60 known consent platforms, newsletter popups and chat widgets; each cleanup step can be turned off. Only clean shots are billed: bot checks or CAPTCHAs, blank pages, timeouts, failed loads and cache hits cost nothing, and the response identifies the result with X-Page-Verdict and X-Billed headers.
Save the returned image as a local file, then reference that file with the same <img> syntax described above. See the ScreenshotNeo documentation for all request options.
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}`);After either request creates shot.webp, place it in your project and use:
<img src="shot.webp" alt="Screenshot of the Stripe homepage">ScreenshotNeo also provides an MCP server with take_screenshot, get_page_info and capture_pdf tools for Claude, Cursor and other MCP clients. The Free plan includes 1,000 screenshots each month with no card; paid plans start at $5 for 3,000 shots. Create a free ScreenshotNeo account to try it.
Troubleshooting by symptom
| Symptom | Likely cause | Fix |
|---|---|---|
| Broken-image icon and alt text | Wrong relative path, filename or extension. | Recalculate the path from the HTML file and verify spelling and capitalization. |
| Works locally but not after deployment | The deployed folder structure differs, or the remote asset is unavailable. | Inspect the deployed page’s requested URL and keep local assets in the same relative structure. |
| Remote address shows a web page | The value is not a direct image URL. | Use the direct permitted image resource or download and host it yourself. |
| Image is visible but inaccessible | Missing or unhelpful alternative text. | Add a concise description, or use alt="" when the image is decorative. |
Practical checklist
- The
<img>element is inside the HTML body. srcpoints to a real image path or direct URL.- The relative path is calculated from the HTML page’s location.
- Filename, capitalization and extension exactly match the file.
altdescribes meaningful content, or is empty for decoration.- You have permission to use and host the image.
- The page has been checked in VS Code’s Integrated Browser.
Frequently Asked Questions
Will a relative image path stay valid if I move the whole project?
Yes, provided the HTML file and image keep the same relationship inside the moved project. If you move only one of them, recalculate the path from the HTML file’s new location.
Recommended Free Tools
Can I use a ScreenshotNeo response as an image URL immediately?
The API response is the image data itself. Save it as a file, upload it to a location your page can reach, or otherwise serve it before putting that resulting path or URL in an img element.
Does VS Code host an image when I preview HTML?
No. VS Code supplies editing and preview tools. The browser resolves the local or remote resource named by src; deployment still requires the image to be available at that path or URL.
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.
