How to preview my html-css code that has a link to a file on my computer?

Hey guys,
I’m working on the project called “product landing page”. I wanted to use a file on my computer for the logo. But I can’t see it in the preview on code camp. Is there a way to be able to that I’m missing? I’m guessing it’s cause the website doesn’t have access to my computer files.

In case it matters, the code I’m using is <img id="header-img" src="marker logo.png">

I am able to see my logo when I preview my code in Visual Studio Code. But I’m not a fan of using VSC because it tries to auto complete you when you start typing code, and I find this distracting, annoying, and bad for learning because you don’t have to remember expressions. Side Note: I’ve tried multiple ways to turn autocomplete off, but none worked (all the solutions i could find on google were old so I’m guessing that’s why). If you know how, please let me know!

There’s also this website “htmlpreview dotcom” but I can’t get my image to load there either (prob same reason as codecamp has) Maybe there is a way to get it working on here that I don’t know about?

Otherwise, do you know of any program I can use that doesn’t auto-complete and also has a preview feature that works with files on my computer? Thanks a ton!

Hi there!

src attribute need a valid source. First You need to upload your img on any image hosting website. Then from there you need to copy your image source link and add it as src value.

1 Like

Hello and Welcome to the forum @totaleclipse !

If your logo is being used on a website online, you could copy a link from the online location, and use is as the src value.

Example:

<img id="header-img" scr="url to logo entered here">

To get your link from an online image/logo, right click and open in a new tab. Copy the link in the address bar, and use this as your src value.

Another option would be to host the image online. There are several free image hosting sites. A few free hosting sites are: pexels.com, unsplash, pixabay, freepik.

Wishing you good progress with your coding path. :slightly_smiling_face:

1 Like

It doesn’t exist online. So is the only option to use a free hosting site?

Yes, of course. Their is no any other way.

Sorry for the late response.

Unfortunately, that is the only way to use an image from your local file. You would need to upload it to one of the free hosting sites, and connect to the url through there.

If you do not wish to do that, and are okay with using a free image from one of the hosting sites, you could do that, too.

Keep up the good progress! :slightly_smiling_face:

Thanks everyone for your replies. Hasan helped me to remove autocomplete from VSC, so I’ll just use that instead of going through the trouble of using a hosting site.

3 Likes

It is good that he was able to help you find a work around for it!
That is why the community is great! Resolutions are somewhere out there. :slight_smile:
Keep up the good progress!

1 Like

Yes, I was very happy. Thanks for spreading positivity! :grinning:

1 Like