Can Http Placehold.it Draw a Circle
Introduction
Placeholder images and avatars are something that nearly every spider web developer has likely used in their projects at some point.
In my projects, I like to employ placeholder images when I'm edifice a website and oasis't got the right images nevertheless from the designer or client. This gives me the chance to visualise where the images would fit into a page without having to slow downwardly progress waiting for them.
Sometimes, I also work on projects where I want to provide a default epitome profile picture for users who haven't uploaded their own all the same. In fact, you lot've probably noticed this yourself on sites such every bit GitHub, Reddit and other social media sites.
In this commodity, I've compiled a list of thirteen unlike placeholder image and profile picture websites/APIs that you can use in your own projects. I've also provided an example epitome and a link for each of the services. Some of them provide extra functionality that you can use to change things like the colours, styles and size using query parameters.
Before you lot use whatsoever of these services, please make certain to check the terms and conditions (if they exist) to make sure that you're immune to utilise their images in your projects.
Then, in no item order, allow's cheque out the services:
1. gravatar.com
gravatar.com is a profile moving-picture show service that y'all can utilize to get an image based on a user'due south public email accost. This service is a little fleck more hands-on in comparison to some of the other services. You'll demand to pass an MD5 hash of the user's email in the URL to fetch their flick. In that location are some examples in the documentation for the service that show how you can achieve this in JavaScript and PHP.
Website: https://en.gravatar.com
Example HTML and image:
1 < img src = " https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250 " >
two. pravatar.cc
pravatar.cc is a service that you can utilise to get placeholder profile pictures. Yous can fetch random images, or you can add a unique identifier (in the instance below, nosotros've used my email address) to get the same image on each asking.
Website: https://pravatar.cc
Example HTML and image:
1 < img src = " https://i.pravatar.cc/250?u=mail@ashallendesign.co.uk " >
3. ui-avatars.com
ui-avatars.com is a service that you tin use to get placeholder profile pictures. This service is slightly different to the other services, considering information technology returns the initials of the user rather than a picture of a man, character or object.
If you're using Laravel Jetstream in your projects, you'll might have already come up across this. It uses this service to fetch a default contour picture show if a user hasn't already uploaded one. You can check the lawmaking where it'south used here.
Website: https://ui-avatars.com
Case HTML and image:
1 < img src = " https://eu.ui-avatars.com/api/?proper noun=John+Doe&size=250 " >
4. joeschmoe.io
joeschmoe.io is a service that you can use for generating profile pictures. This service offers multiple API endpoints for getting different avatars, and then I'd definitely recommend checking out the documentation on their website.
Website: https://joeschmoe.io
Instance HTML and image:
1 < img src = " https://joeschmoe.io/api/v1/post@ashallendesign.co.uk " >
v. dicebear.com
dicebear.com is a service that you can use for generating many different types of profile pictures. This service offers a lot of endpoints and configuration options that you can use to completely modify the avatars that are fetched. This is one that I would definitely recommend checking out.
Website: https://dicebear.com
Example HTML and image:
1 < img src = " https://avatars.dicebear.com/api/adventurer-neutral/mail%40ashallendesign.co.uk.svg " >
6. robohash.org
robohash.org is a service that you tin use to generate robot profile picture placeholders.
Website: https://robohash.org/
Example HTML and image:
ane < img src = " https://robohash.org/mail@ashallendesign.co.uk " >
7. placeholder.com
placeholder.com is a website that you can use to generate placeholder images. I find this service peculiarly useful because it can be used to return images that show the pictures dimensions. So, it can exist actually handy when you're builing a website and want a visual reminder of what size image needs to supervene upon the placeholder before releasing.
Website: https://placeholder.com
Example HTML and image:
1 < img src = " https://via.placeholder.com/250 " >
8. baconmockup.com
baconmockup.com is a uncomplicated placeholder image service that provides images of bacon.
Website: https://baconmockup.com
Example HTML and image:
1 < img src = " https://baconmockup.com/250/250/ " >
9. fillmurray.com
fillmurray.com is a placeholder image service that provides images of Pecker Murray for using on your website.
Website: https://www.fillmurray.com
Example HTML and image:
1 < img src = " https://world wide web.fillmurray.com/250/250 " >
10. placekitten.com
placekitten.com is a simple service that can be used to fetched pictures of kittens that tin be used as placeholder images.
Website: https://placekitten.com
Example HTML and paradigm:
ane < img src = " http://placekitten.com/250/250 " >
eleven. placebear.com
placebear.com is a elementary website that can be used to fetch images of bears that can be used equally placeholders in your projects.
Website: https://placebear.com
Example HTML and epitome:
1 < img src = " http://placebear.com/250/250 " >
12. placecage.com
placecage.com is a service that tin can be used to fetch pictures of Nicolas Muzzle to use as placeholders in your projects.
Website: https://www.placecage.com
Example HTML and prototype:
1 < img src = " http://www.placecage.com/250/250 " >
13. placebeard.it
placebear.it is a placeholder image service that you can utilize to fetch images of people with bears to use in your websites.
Website: https://placebeard.it
Instance HTML and image:
one < img src = " http://placebeard.it/250/250 " >
Conclusion
This postal service should have shown y'all 13 new services that you tin can utilize to add placeholder images and profile pictures to your website. Peradventure one of these will come in handy in the next project you piece of work on?
If this post helped you lot out, I'd love to hear about information technology. Likewise, if you lot take any feedback to improve this post, I'd also love to hear that too.
If you're interested in getting updated each time I publish a new post, experience free to sign upwardly for my newsletter below.
Continue on building awesome stuff! 🚀
Source: https://ashallendesign.co.uk/blog/13-placeholder-avatar-and-image-websites
0 Response to "Can Http Placehold.it Draw a Circle"
Post a Comment