Member Avatar for abadi11

hi all,
I designed a simple html web page with pics and go up and go down links to navigate inside the page. but after I sent it to a friend it was ok until he clicked one of the take me to top links ... all the pics were gone and replaced by small boxes with an x inside them.
what have I done wrong ?

  • 4 Contributors
  • 3 Replies
  • 81 Views
  • 22 Hours Discussion Span
  • Latest Post Latest Post by ccube921

Dani AI

Generated

— the small box with an X is the browser telling you it could not load an image resource. and are on the right track: missing or misreferenced image files are the typical culprits, and was correct to ask for code/links so others can see the exact setup.

Quick checks that resolve almost every case:

  • Open a broken-image in a new tab (or use the browser Network panel) to see the full URL and HTTP status; that shows whether the file is not found, blocked, or misnamed. See Chrome DevTools Network documentation for how to inspect requests (Network tools).
  • Confirm the image files were actually sent/uploaded and that the folder structure on the recipient’s side matches what the HTML expects.
  • Watch for filename case differences (servers can be case-sensitive), incorrect base URL settings, or file-system-only paths that work on your machine but not someone else’s.
  • If the images disappear only after interacting with the page, check for JavaScript that swaps or lazy-loads images and inspect console errors.

For clear guidance on valid image referencing and best practices, the MDN article on using images in HTML is useful (Images in HTML). Packaging the HTML together with its image folder (preserving paths) or serving the files from a web host will avoid most problems.

Recommended Answers

All 3 Replies

Member Avatar for buddylee17

You'll have to post some code or provide a link.

Member Avatar for peter_budo

I think problem is in path declaration if you used absolute path like C:/My Website/img/img1.jpg , you should replace it with relative coding such as img/img1.jpg where HTML document is in "My Website" folder

Member Avatar for ccube921

1. keep the images in a folder called img(which should be in the folder you are sending).
2. reference them as: img/img name here
3. make sure you sent your friend the images! If he doesnt have them the x shows up which means it couldnt find the image!

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.