Trying to use API but blocked by CORS policy

[MarianaK96]

Hey! I am trying to use the API to fetch an avatar for my site, but the request is blocked by the CORS policy. Any suggestions on what I could do apart from set up a proxy server?

I am using React. I have looked at the installation method but my application only uses yarn - would it still work with that as opposed to NPM?

Edit: just tried with yarn and it worked! But still wondering about the CORS issue

[FlorianKoerner]

Hi @MarianaK96

You don't have to fetch the images. Just put the URL in the src attribute of your img element.

function Avatar() {
    return <img src="https://avatars.dicebear.com/api/identicon/mariana.svg" />;
}

export default Avatar;

Alternatively, you can install the library. Of course, this also works with yarn.

yarn install @dicebear/avatars @dicebear/avatars-identicon-sprites

Here's how you can use the library in React:
#155

[MarianaK96]

Thanks for getting back to me so quickly Florian! I'll try using the url, I'm running into some other issues with the installation so would prefer the former.

[FlorianKoerner]

No problem.

I can't reproduce your problems with fetch, unfortunately.
https://codesandbox.io/s/hardcore-banach-dfebi?file=/src/App.js

For further help I need a sample code from you and the used browser.

[MarianaK96]

Thanks for trying, I will have another look at it later. Not sure if I have to create another ticket for this but I have a small question about adding properties to the url. I'm sure it's really obvious but I'm being a bit dim!

We can use the following URL to select certain moods for our avatar:
https://avatars.dicebear.com/api/male/john.svg?mood[]=happy&mood[]=sad

But what would I type in if I want to select facialHairProbability (e.g. for Micah) and it takes an Integer? Would I need to add something in place of the empty array after the property?

[FlorianKoerner]

It is now easier to set the options in the URL.
See: #179

Before
https://avatars.dicebear.com/api/male/john.svg?mood[]=happy&mood[]=sad

After
https://avatars.dicebear.com/api/male/john.svg?mood=happy,sad

Of course, the old variant still works.

But to answer your question - The URL could look like this:
https://avatars.dicebear.com/api/micah/john.svg?facialHairProbability=100