Hello,

Do you have plan to allow us to generate avatar on demand using url ?

What i mean is, i would like to generate an avatar for each new user in my product and store it on my database.

Could you give me some tips to do that ?

Tanks !

Hello thanks for this amazing project! Unfortunatly today the app is down...
Can we do something to help?
Thanks

E.g. https://avataaars.io/?avatarStyle=Circle&topType=LongHairMiaWallace&accessoriesType=Blank&hairColor=BrownDark&facialHairType=BeardMagestic&facialHairColor=BrownDark&clotheType=BlazerShirt&eyeType=Dizzy&eyebrowType=DefaultNatural&mouthType=Eating&skinColor=Brown as copy pasted from https://getavataaars.com shows "Application Error"

@fangpenlin

I can put the language of the project
Make it into Chinese and publish it on GitHub,
is it okay?

I will indicate the github author,
Also I want to record a video,
Teach everyone to use this project for free,

Thank!

This code

<img src='https://avataaars.io/?avatarStyle=Circle&topType=ShortHairShortFlat&accessoriesType=Blank&hairColor=BrownDark&facialHairType=BeardMagestic&facialHairColor=BrownDark&clotheType=CollarSweater&clotheColor=Blue03&eyeType=Happy&eyebrowType=Default&mouthType=Smile&skinColor=Light'
/>

should return

but instead returns

Even a quick devtools edit returns the beard-free avataar. Smaller beards work fine.

The title says everything

Is there any plans to migrate to react 18?

Has anyone ever tried to do something in drag-and-drop style? with preview of styles, example, hair, mouth?

Nice work

Example URL that fails for me:

https://avataaars.io/?avatarStyle=Circle&topType=WinterHat1&accessoriesType=Round&hatColor=Red&facialHairType=BeardMedium&facialHairColor=BrownDark&clotheType=CollarSweater&clotheColor=Red&eyeType=Surprised&eyebrowType=UnibrowNatural&mouthType=Serious&skinColor=Brown

If you could please restart the application, that would be greatly appreciated, thanks!

Hello.
Do you have any plans to create an ionic version?

This error message shows up sometime when I use the avataaars.
I can't figure out how to solve this, sometimes it pops up, sometimes it's fine.
I think there is something wrong with the package.

The following NoSuchMethodError was thrown building AvataaarImage(dirty):
flutter: The getter 'pieceEntries' was called on null.
flutter: Receiver: null
flutter: Tried calling: pieceEntries
flutter:
flutter: When the exception was thrown, this was the stack:
flutter: #0 Object.noSuchMethod (dart:core-patch/object_patch.dart:50:5)
flutter: #1 _AvataaarImage&StatelessWidget&AvataaarsApi.getUrl (package:avataaar_image/src/image.dart:47:27)
flutter: #2 AvataaarImage.build (package:avataaar_image/src/image.dart:32:22)
flutter: #3 StatelessElement.build (package:flutter/src/widgets/framework.dart:3789:28)
flutter: #4 ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:3739:15)
flutter: #5 Element.rebuild (package:flutter/src/widgets/framework.dart:3565:5)
flutter: #6 ComponentElement._firstBuild (package:flutter/src/widgets/framework.dart:3722:5)
flutter: #7 ComponentElement.mount (package:flutter/src/widgets/framework.dart:3717:5)
flutter: #8 Element.inflateWidget (package:flutter/src/widgets/framework.dart:2961:14)
flutter: #9 Element.updateChild (package:flutter/src/widgets/framework.dart:2764:12)
flutter: #10 ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:3750:16)
flutter: #11 Element.rebuild (package:flutter/src/widgets/framework.dart:3565:5)
flutter: #12 BuildOwner.buildScope (package:flutter/src/widgets/framework.dart:2278:33)
flutter: #13 _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding&PaintingBinding&SemanticsBinding&RendererBinding&WidgetsBinding.drawFrame (package:flutter/src/widgets/binding.dart:700:20)
flutter: #14 _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding&PaintingBinding&SemanticsBinding&RendererBinding._handlePersistentFrameCallback (package:flutter/src/rendering/binding.dart:286:5)
flutter: #15 _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding._invokeFrameCallback (package:flutter/src/scheduler/binding.dart:1012:15)
flutter: #16 _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding.handleDrawFrame (package:flutter/src/scheduler/binding.dart:952:9)
flutter: #17 _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding._handleDrawFrame (package:flutter/src/scheduler/binding.dart:864:5)
flutter: #21 _invoke (dart:ui/hooks.dart:219:10)
flutter: #22 _drawFrame (dart:ui/hooks.dart:178:3)
flutter: (elided 3 frames from package dart:async)
flutter: ════════════════════════════════════════════════════════════════════════════════════════════════════
flutter: Another exception was thrown: NoSuchMethodError: The getter 'pieceEntries' was called on null.
flutter: Another exception was thrown: NoSuchMethodError: The getter 'pieceEntries' was called on null.
flutter: Another exception was thrown: NoSuchMethodError: The getter 'pieceEntries' was called on null

A static webpage would be the best. I am not familiar with React.

Also it is possible to host this offline? Meaning no access to the internet? As I can see this app relies on avataaars.io is the API there open source too?

Hey there, awesome project. Can you please put the hosted url of the project to the about section. As people used to github tends to look to the about section for project links more.

Hi there,

When I'm using the avataaars.io site, the site get's me an application error. Could you help me?

The URL i'm trying to access: https://avataaars.io/?accessoriesType=Kurt&avatarStyle=Circle&clotheColor=Blue01&clotheType=Hoodie&eyeType=EyeRoll&eyebrowType=RaisedExcitedNatural&facialHairColor=Blonde&facialHairType=BeardMagestic&hairColor=Black&hatColor=White&mouthType=Sad&skinColor=Yellow&topType=ShortHairShortWaved

需要vue3的支持

I have the feeling that all beard options have an equal amount of chance on the RANDOM button:

But I feel like it's more realistic to give 50% chance to "blank" and divide the other 50% among all other beards.

Doing a fresh install of react and the repository. The server comes up briefly and crashes with:
Failed to compile.

/Users/daniel/Documents/GitHub/avataaars-generator/node_modules/@types/lodash/common/object.d.ts
(1689,12): error TS2304: Cannot find name 'Exclude'.

I'm trying to specify later versions of lodash and typescript (just searching for other people with this issue on other projects) but same error.

I'm not fluent in react (I'm an ios programmer).. so a little too much in the deep end here

Hello,

is it possible to embed this generator in a HTML5 game that is distributed as an app on Google Play and the App Store?

Or can I setup a website and open it into a web view from within the game?

Kind regards

Hello,
On hitting the image url that I get of the avataar, on another tab gives me this error.

Please help.

I am developing a React Native application, and I have an image component that displays an avatar with the following URL: https://avataaars.io/?accessoriesType=Kurt&avatarStyle=Circle&clotheColor=PastelRed&clotheType=ShirtVNeck&eyeType=Hearts&eyebrowType=Default&facialHairColor=Platinum&facialHairType=MoustacheFancy&hairColor=PastelPink&hatColor=Blue02&mouthType=Serious&skinColor=Light&topType=LongHairFrida.

However, when I try to use this URL in the React Native image component, the URL automatically changes to https://avatars.githubusercontent.com/u/14477481. I don't understand why this is happening. Can someone help me understand and solve this issue? Is there any specific configuration or something I need to do to prevent the avatar URL from changing automatically?

as user, I would like to have a way to see the items before choosing it...

for example {Eyes} see every image of each ayes before choosing it

Any issue with using getavataars.com using a tool like puppeteer?

Hello,

Just a reminder to not forget it 😉

Description?

• I would like to provide a user's Gender ( in the parameters #ReactJs ) and get an avatar respectively!!

Using the React code as a baseline I am writing a version of this code that uses everything Angular rather than requesting an image from the website.

I have currently added the ability to create an avatar and custom the body color, and the shirt type.

As I progress in writing this Angular module I will update this issue with a github repo for anyone that is looking to create an Angular app with this.

Hello guys,
Thanks a lot for the quick response and fixing of the error.
I just had a question regarding the url. Can we get the png image from the url inspite of svg's so that It will be easier for me to load the image direct in my app coz there are many custom methods that Ihave to write for loading svg's and resizing of those is also a hard part.
Or is there any way to get the png image from url without downloading it separately.
Thank you.

Describe the bug
While sharing the link there is no meta image

To Reproduce
Steps to reproduce the behavior:
1.Paste site link on social media like facebook
2.Wait for site meta title and description to load
3. Meta image doesn't load

Expected behavior
There should be a meta image while sharing the link

Screenshots
Image is not loading, only the title and description

When I run the application locally, I can't embed svg images

{% set url = 'https://127.0.0.1:8007/?accessoriesType=Kurt&avatarStyle=Transparent&clotheColor=Gray02&clotheType=ShirtVNeck&eyeType=Side&eyebrowType=RaisedExcitedNatural&facialHairColor=Red&facialHairType=BeardLight&hairColor=Blonde&mouthType=Default&skinColor=Pale&topType=LongHairCurly' %}

<img src="{{ url }}" />

When I inspect what's returned, it's the html page, not the svg.

Is there a way to "trigger" an svg download, e.g. /myavatar.svg?accessoriesType=Kurt&avatarStyle=Transparent&clotheColor=Gray02&clotheType=ShirtVNeck

That might make caching easier, too.

There might be a problem with the project dependency tree.
It is likely not a bug in Create React App, but something you need to fix locally.

The react-scripts-ts package provided by Create React App requires a dependency:

"eslint": "5.6.0"

Don't try to install it manually: your package manager does it automatically.
However, a different version of eslint was detected higher up in the tree:

/direc/avataaars-generator-master/node_modules/eslint (version: 5.12.0)

Manually installing incompatible versions is known to cause hard-to-debug issues.
To fix the dependency tree, try following the steps below in the exact order:

1. Delete package-lock.json (not package.json!) and/or yarn.lock in your project folder.

2. Delete node_modules in your project folder.

3. Remove "eslint" from dependencies and/or devDependencies in the package.json file in your project folder.

4. Run npm install or yarn, depending on the package manager you use.

In most cases, this should be enough to fix the problem.
If this has not helped, there are a few other things you can try:

5. If you used npm, install yarn (http://yarnpkg.com/) and repeat the above steps with it instead.
   This may help because npm has known issues with package hoisting which may get resolved in future versions.

6. Check if /direc/avataaars-generator-master/node_modules/eslint is outside your project directory.
   For example, you might have accidentally installed something in your home folder.

7. Try running npm ls eslint in your project folder.
   This will tell you which other package (apart from the expected react-scripts-ts) installed eslint.

If nothing else helps, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
That would permanently disable this preflight check in case you want to proceed anyway.

P.S. We know this message is long but please read the steps above :-) We hope you find them helpful!

I tried everything on the list with no luck.

The circle is really useful and really nice. But is it possible to change the color of the background?

I got the following warnings running the library.

I think it should migrate to the new React.js version.
Thank you

(219,26): error TS2339: Property 'outerHTML' does not exist on type 'Element | Text'.
Property 'outerHTML' does not exist on type 'Text'.

vue3使用不了吗？

Dear Lin,

To reproduce this issue, generate any avatar with { facialHairType: BeardMagestic } query, copy the given SVG markup api code and load it in a browser. BeardMagestic facial hair will not show up.

Thanks for making this project open source! It is very creative and has amazing use cases!

Rahil

@fangpenlin @gkoberger @weisisheng I have also tried to cloned this website for creating avtaars in native angular and angular material, and mainly for open project work, should i keep working and deploy it or It can be a copyright issue to do so. I must add that this is just for project work only.

hi guy's - love the concept however I couldn't get it to work on IE :(