put image in code pen
how can i put an image in code pen to show my example please?
19 Replies
I usually use https://picsum.photos/
it won't be the same image, but usually the only thing that matters is that there's something there, and picsum lets you determine the size of the image you receive very easily
there's also placeholders built in. If you click assets at the bottom, you can select a bunch of free ones
if you really want to use your own images, I think that's a Pro (paid) feature. Alternatively, you can host your example on something like github pages, or host the images you need elsewhere and then point to them in your codepen
you can set the size like this
https://picsum.photos/200/300or just
<img src="//unsplash.it/200/300"> but i believe picsum and unsplash is exactly the same.
You can also give it a seed value
<img src="//unsplash.it/seed/1/200/300">
But if you want to show your own images you can upload them to an image host such as imgbb.com then after you upload it, right click the image and choose "Copy image link" and you have the direct link to this image and now you can paste in your codeI use Imgur myself but basically you just need it to be hosted online somewhere to use the image link, unless you have codepen pro
What is the seed value? I’ve never heard of that before
Ahh got it
“The seed value ensures that the same image is returned every time the page is loaded, maintaining consistency while still appearing random.”
Yeah 🙂
But yeah if you dont use seed you get same image every time, thats why i use it
You mean if you don’t use seed, you DO get a different image every time right ?
Seed makes it the same random image so it’s not switching the image every time page reloads
If you do
You can 2 images that are random. But same image
If you do
you get 2 different images
And yeah perhaps i should not had used pug in my example but oh well... Hopefully this explains
And yeah
Seed makes it the same random image so it’s not switching the image every time page reloads This is corectI’ve never seen pug used that’s really cool you can loop and use variables
Yeah pug is amazing. You can create arrays and objects and functions and mixins and tons of amazing things
i have my codepen set to use pug and scss by default 😂
got tired of switching all the time
I have scss on my list of what to learn next. I may have to add pug too… does pug compile in the same way scss does and spit out a compiled html that looks like vanilla html ?
Yeah you have compiler extensions for pug in vscode. Not really sure how to compile it without extension... But the extension works great
But i always write all my code on codepen
Codepen doesn’t have an option to see the pug compiled then? I know it does have a way to view compiled css for scss. Good to know ✨
It does 🙂
View Compiled HTML
Yeah works same with pug 🙂
Awesome, thanks so much for sharing all the knowledge!
Apologies OP for hijacking your thread to pick toks brain 🤣
No problem man 🙂