Member Avatar for cdudefire

For my internet programming class I have to create a XHTML file that has an image in it, among other things. The problem that I am having is that when I open up my file on other computers the image will not load. The file path is valid on my own computer but of course when I move to other computers the image does not load. Help.

  • 2 Contributors
  • 3 Replies
  • 134 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by cdudefire

Dani AI

Generated

Nice catch by and confirmation from — the image loaded on one machine because the HTML pointed to a filesystem location that only existed there. A few practical tips and small checks that help avoid this surprise when moving files between machines or uploading to a server.

Keep images inside the project and use document-relative, root-relative, or parent-relative URLs (not filesystem drive paths). In XHTML remember the tag must be well-formed (self-closed) when served as XML:

<img src="images/logo.png" alt="Site logo" />

Other useful patterns:

<img src="/assets/hero.jpg" alt="Hero image" />    <!-- root-relative -->
<img src="../shared/icon.svg" alt="Shared icon" /> <!-- go up one folder -->

Common pitfalls to verify before handing in or deploying:

  • Case sensitivity: Linux servers are case-sensitive; ensure filename case matches exactly.
  • Path separators: use forward slashes (/) in URLs; backslashes (\) are invalid in web paths.
  • Spaces and special characters: avoid them in filenames or percent-encode them.
  • The HTML base element (<base href="...">) can change how relative URLs resolve — check for it.
  • If opening the file with file://, remember paths resolve relative to that file, not a web server; packaging (zip) must preserve folder layout and included images.
  • For XHTML served as application/xhtml+xml, malformed markup can break resource resolution; validate well-formedness.

Quick debugging checklist: open the browser DevTools Network tab and reload to see 404/403 for image requests, right-click the broken image and “Open image in new tab” to test the URL directly, and confirm the image file was actually included in the submission folder.

For reference on correct markup and behavior see the MDN guide on images and the XHTML spec:

Recommended Answers

All 3 Replies

Member Avatar for schoolboy2010

could you please post your code.
I think the problem is that you used an absolute path for your image.
For example, you probably used something like

<img src="C:/Documents/website/image.jpg" alt="My image"

.
To make your code portable on many computers, you should use a relative path like this:

<img src="website/image.jpg" alt="My image"

where "website" is the folder your image is located in.
Also, I'm assuming you have the embedded image on the other computer you are viewing the website on... it's an error that others have made.

Member Avatar for cdudefire

Thank you. That was easy, I fixed it.

Member Avatar for cdudefire

I did use a absolute path instead of a relative path. It changes everything.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.