Adding image ( local file )

Hey,

I’m having an issue with adding an image/logo to my pen.

The file I am trying to add is a local file, and after some research I understood that I will need to make the file (logo) recognisable
to the web for it to appear on my page - but I don’t know how I should rename/relocate the file.

Would appreciate some help.

Here is my pen : https://codepen.io/nenna_e/pen/YzzoYJr?editors=1100#0

Hi @nenna
I had a chance to review your code and I can see where the issue is
You can not directly link from your directory on your computer when you are uploading stuff on CodePen
This code …

<img id="header-image" src="file:///Users/sehnazerdal/Desktop/e8ff3605-815c-4bfe-9e3b-d5f1e657ea48_200x200.png " alt="baklo logo">

… will ned to be replaced with something such as

<img id="header-image" src="URL OF THE PICTURE ON THE INTERNET" alt="baklo logo">

I hope this helps out

Good luck with your project(s)!

If I understand it right, a “premium” feature will let you do that. (I am usling repl.it for my project that has pic tures; it lets me upload the images https://repl.it/@xiousgeonz/visual-rep-of-mult-identify-Twos )

1 Like

Yes, and the thing is I do not know how I should access the url of the picture on the internet :).
When i open the file with Chrome i get this: file:///Users/sehnazerdal/Desktop/e8ff3605-815c-4bfe-9e3b-d5f1e657ea48_200x200.png
Desktop indicates that it’s a local file and I read here: https://blog.teamtreehouse.com/how-to-fix-a-broken-image
that I should “convert” it in to a relative file path.
When I tried to rename the files though, I couldn’t make it work.

Soo, this is the solution I’m looking for.

As per their detailed description, PRO version does let you do it but I don’t see the purpose of paying for it when there are MILLIONS of other image hosting services that you can host the image for free.

@nenna What you need to do is you need to put your picture on the internet and get the address for it.

Here is a good link for you to read

1 Like

I think it needs to be going to “URL” … so if you have a blog or anything with a place to upload a picture to, you could then send it there. (Or you could get a website :wink: )

A simple fix I use is uploading the image/logo to postimage.org. This website gives you a html link for your uploaded image which you can then reference in codepen and voila

1 Like