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.
hi guys im working on portfolio project, i can add images from the web , but i want to add pic of myself that is in my photos file in my computers ,anybody knows how to do it , it might me simple but i can’t figure it out now , please help me out to keep working on my project
thanks a lot in advance
happy coding
ulbio
2 Likes
lasjorg
September 2, 2021, 5:20pm
3
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
Create a new issue on GitHub.
Drag-and-drop an image onto the comment field.
Wait for the upload process to finish.
Copy the URL and use it in your Markdown files.
or you may use google drive .
thank you very much for your help!
system
Closed
March 4, 2022, 10:02am
8
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.