Member Avatar for rony001

I am new to using html.
I have been going around in circles for hours to find where to put my image in the script ?the script disdisplays a frame of picture with broken link .I found I can add pictures like below but I am trying to learn how to fix the broken link in my existing index page in second script. any bit of info would be helpful

<h2

<h2> images </h2>
<img border="0" src="/images/pulpit.jpg" alt="Pulpit rock" width="304" height="228"></body>

ii

</div><div id="I1045" style="display:block;clear: both;text-align:center;" class="Image_Default"><img id="I1045_img" src="resources/100_0271.JPG"  style='width:284px; border:none;'/></div><div id="I1046" style="display:block;clear: both;" class="Text_Default">    
<div id="I1046_sys_txt" class="sys_txt" style="margin:0px; padding:0px; color:; font:; background-color:;"># 304 M&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; $ ........<br> .... <br>wholesale only<br></div>
Edited by rony001 because: misspelling
  • 3 Contributors
  • 2 Replies
  • 246 Views
  • 12 Hours Discussion Span
  • Latest Post Latest Post by JorgeM

Dani AI

Generated

A compact debugging checklist and a few practical fixes for the broken image on the index page. The fastest way to know what the browser is actually requesting is to check the DevTools Network panel and reload the page: note the exact image URL, the HTTP status, and the response headers. A 404 shows a path mismatch; 403 means permissions; a 200 with a non-image content-type usually means the server returned an error page instead of the file.

Common causes and clarifications not covered above: a path starting at the site root behaves differently from a path relative to the current document (pages in subfolders resolve relative paths differently). A HTML <base> tag can silently change relative-path resolution. Server platforms matter: case matters on most Linux hosts but not on Windows, and filenames with spaces or non-ASCII characters often cause trouble. Upload errors or wrong MIME types (for example an uploaded file that is actually HTML) will also make an image appear broken.

Practical checks to apply immediately: open the DevTools request for the image and paste that URL directly into the browser address bar to see the raw result; verify the file exists at that path on the server; confirm webserver file permissions allow reading the file; check response headers for Content-Type; disable any rewrite/hotlink rules that might block static files. If the file system or hosting panel is available, list the image directory to confirm the exact filename and case.

A minimal, robust example (adjust paths to match the site structure):

<img src="assets/img/photo.jpg" alt="Descriptive text" style="max-width:100%;height:auto;">

As pointed out, folder placement and exact filenames are crucial; ’s emphasis on learning relative vs absolute paths helps prevent this class of problems.

Recommended Answers

All 2 Replies

Member Avatar for zeroliken 
src="/images/pulpit.jpg"

try the following

  • remove the first backslash " / ", that should be src="images/pulpit.jpg"
  • make sure that there is an image folder in the same directory as the html webpage
  • check for spelling errors

  • check if the image is really in jpeg format

    src="resources/100_0271.JPG"

  • that should be a .jpg, extensions are case sensitive

  • check other soultions above if still not working
Edited by zeroliken
Member Avatar for JorgeM

For those that are new to HTML, learning how to create a clean and organized file structure should be at the top of your list.

It's a good time to review how to use relative paths in your HTML documents. Here is a quick summary on this topic that you may find useful.

Relative and Absolute Paths

In addition to the organized file structure, it would be a good idea to also begin to develop a routine in organizing your HTML code within your pages. Its going to make it a lot easier for you and others to review your code and debug.

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.