[html] How to add image that is on my computer to a site in css or html?

I have an image that I made in photoshop on my computer and I was wondering if there is a way to add the image to my website with CSS or HTML without having to image on a website. Thanks.

Upload the image on your server or in images hosting site where you get image link and then add the line on your website page where you get that image the line is

<img src="paste here your image full path"/>

No, Not if your website is on a remote server, i.e not on localhost.

The image needs to be in the same folder that your html page is in, then create a href to that folder with the picture name at the end. Example:

<img src="C:\users\home\pictures\picture.png"/>

If you just want to see the image on your local browser, this can be done if you have a server running locally. You just need to reference the local server via http (not file://), like:

http://localhost/my_picture.jpg

if picture.jpg is in your local server's webroot folder. You can do this for any site if you open your browser's developer tools and change the img element's src attribute to the local server's URL for the image. If you have access to the HTML of your site, then change it there. But obviously if someone not on your local computer/server accesses the site, they will get a broken image unless they happen to be running a local server as well and have an image with the same filename, which would be weird.

If you just want to see how your picture will look on the website without uploading it to the server or without running your website on a local server, I think a very simple solution will be to convert your picture into a Base64 and add the contents into an IMG tag or as a background-image with CSS.

This worked for my purposes. Pretty basic and simple, but it did what I needed (which was to get a personal photo of mine onto the internet so I could use its URL).

1. Go to photos.google.com and open any image that you wish to embed in your website.

2. Tap the Share Icon and then choose "Get Link" to generate a shareable link for that image.

3. Go to j.mp/EmbedGooglePhotos, paste that link and it will instantly generate the embed code for that picture.

4. Open your website template, paste the generated code and save. The image will now serve directly from your Google Photos account.

Check this video tutorial out if you have trouble.