img element appearance

hello
every time i try to import an img from google
to my code the image doesn’t appear on my codepen blank
should I only use links from specific websites?
or is there something wrong with my code?

 <img
        id="header-img" src="https://images.app.goo.gl/wudjBgPJhiUa7Zf99" alt="original db logo">

Hello,
You can not import images to the codepen unless you have a pro account. you need to use another platform like google drive or GitHub to upload your image and use the address.

2 Likes

Doesn’t look like a direct link to the image. If I open it in a new tab I get a base64 encoded version. You can use that as the source or find a different one.

<img src="data:image/png;base64,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" alt="">
1 Like

thanks a lot for your answer.

i would love to know how as well!
i’m a beginner.

You can use codepen pro account or use other services like Github or Drive. Copy the URL link to the image on your preferd hosting. e.g. https://i.imgur.com /1aCAUZA.jpg . Open the codepen that you want to add the image.

upload here : https://imgur.com/

or if you want to use github:

Upload images to GitHub

  1. Create a new issue on GitHub.
  2. Drag-and-drop an image onto the comment field.
  3. Wait for the upload process to finish.
  4. Copy the URL and use it in your Markdown files.

or you may use google drive .

thank you very much for your help!

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.