How to use HTML Relative File Paths within the freecodecamp editor

Hello everyone, I’m doing the last project Build a Personal Portfolio Webpage for the (New) Responsive Web Design Certification and I want to use a local image from my PC. I should use the sintaxis below, but since I’m working on the freecodecamp editor, I don’t know how to do that, or even if it is possible.

<img src="images/picture.jpg">

The “picture.jpg” file is located in the images folder in the current folder
thanks in advance
Barbara Ines

You have to use images that are available somewhere online

1 Like

ok, I was afraid so :pensive:,
thanks

If you use Google Photos, you can upload a photo you want to use in your portfolio.

Once uploaded, you would click on the photo to view it. Next, you would right-mouse click on the image shown and select Copy image address and paste the url as the value of the src attribute for an img element:

<img src="https://lh3.google.com/pw/some-very-long-alpha-numeric-string" />

Peek 2023-01-27 12-54

1 Like

Thanks I tried to use google drive but I could not get the image url, so I created a netlify account, and then upload an index.html file that I created with just the image inside it. then I proceed like you tell me for the second step.
thanks for your solution, now I know I can use google photo instead.

You can use Google Drive to, but the steps are greater and a bit more involved.

yeah a lot more complicated :laughing:

FYI - It is not as complicated as I thought to use a Google Drive image.

  1. Locate Google Drive image

  2. Right-click image and select Get link

  3. Under General access select Anyone with the link

  4. Click the Copy link button

  5. The copied link will look something like:

    https://drive.google.com/file/d/alpha-numeric-id/view?usp=share_link&resourcekey=alpha-numeric-resource-key
    
  6. Starting with a new url string that looks like:

    https://drive.google.com/uc?export=view&id=
    

    you will concatenate the long-alpha-numeric-id to the url in the above step like:

    https://drive.google.com/uc?export=view&id=alpha-numeric-id
    
  7. Next, concatenate the part of the original url that starts with &resourcekey= and ends with the alpha-numeric-resource-key to the url corrected in the above like:

    https://drive.google.com/uc?export=view&id=alpha-numeric-id&resourcekey=alpha-numeric-resource-key
    
1 Like

I will check this later for knowledge, but I’ll be using the google photo solution, I thinks is easier and faster.
thank U