Member Avatar for Croft .L

Yo,

Can somebody tell me the code to put an image file in to an html document.
But not from a URL but from a file saved yo my computer!
Thanks ;)

  • 4 Contributors
  • 3 Replies
  • 116 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by Sailor_Jerry

Dani AI

Generated

A quick clarification that builds on the replies here: wanted to use an image saved on their computer. correctly pointed out that the browser resolves a path you give it; was right that other people can only see files that are actually served by a host; and 's CSS suggestion is a good reminder that decorative images often belong in CSS while meaningful content belongs in the page markup. The notes below explain practical steps and common pitfalls so the image reliably appears both on your machine and when the site is published.

Keep your project files together and use a relative path so the page stays portable. A typical layout is an images folder next to your HTML, and an image reference that includes the folder. Also include accessible alt text so the image still communicates if it fails to load.

<img src="images/photo.png" alt="Short description of the image">

When testing, avoid relying on raw file URLs if you plan to publish the site. Run a simple local web server to mirror real hosting (this is safe for testing and avoids file:// quirks):

python3 -m http.server 8000

Then open in your browser.

Quick troubleshooting checklist: check filename case (Linux is case-sensitive), avoid spaces or encode them, verify relative levels (../), inspect the browser console/network tab for 404s or wrong MIME types, and confirm the image was uploaded to the same place your page expects. If sharing the site with others, upload the image to the site host or use a proper hosting service rather than exposing your personal machine.

Recommended Answers

All 3 Replies

Member Avatar for tgreer

You have to provide a path to the image. HTML documents use URLs for paths. If the image is in the same directory as your html file, then you use the filename.

The tag is "img":

<img src="myImage.jpg">

Member Avatar for ayksolutions

You have to upload your image first, you can't just host it off of your computer.

Member Avatar for Sailor_Jerry

If your html page utilizes this image on multiple pages I would move the logic to a css file. It’s also good practice

You could do something like this in a css file if it were a background image or something. Just an example.

body{background: url(path/to/image/on/your/computer/image.gif)  repeat-y;}
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.