can anyone tell me how images work inside code pen or how to actually add an image
Make an account on cloudinary.com (it’s free) or some other site that codepen accepts, upload pictures there and then append the link in your code on codepen (imgur is not among those accepted, BTW).
1 Like
Yes, you could store your own on a site.
It’s not clear if you need to store them or just want to snag some off the internet. For your little projects for FCC, if the image is on a stable source, you can just link to that. In a real life page, you’d want your own copy of the image either on your site or hosted somewhere that you control, but for this …
Go to the image and right click on it. Select “copy image address”. This will copy the address to your clipboard. Go to codepen. You will need an image tag in your html pane:
<img src="https://upload.wikimedia.org/wikipedia/commons/a/a5/IngridBergmanportrait.jpg"
You can paste your own url into the tag.
Upload them to your google drive, and change the sharing options to public. Then go to https://gdurl.com and past that link there. Select “Create Permalink” then under the Standard Url subheading, right click the example link and select “Copy Link Address”. That is your img src.
1 Like
Hey man,
-I’m with Don-Cio…use CodePen.
–The problem with GoogleDrive is they constantly move their stuff around so it won’t always be the same link, e.g. I used Google Drive for the tribute page I finished two days ago but when I went to go bask in my glory all I had was the alt.
–I saw in a thread that people were using Cloudinary and that’s fixed the problem for me. I was even able to rotate and add effects to the image in Cloudinary.
—Go open an account there and your problems are solved
1 Like
Thank you for the help It worked perfectly
1 Like