First of all, and most important: do not make your access_token
public like you just did on the shared code, by doing so you are violating the APIs terms of service.
Please, edit your gist and/or any public repository and erase your access_token, after that go to the API credentials manager and re-generate your client secret so you can force previous tokens to expire.
Now to adress the problem:
The reason you are getting a CORB error is because you are passing the API media URL directly to an img
element. This will never work because every API endpoint will return a JSON file, never a valid image format.
You must get one of the image URLs returned by the media endpoint and use that as the src
attribute of your img
element. Make sure to test any endpoint you want to use on the API docs page before trying to use them.
Edit: To give more technical details, take this media response:
{
"_links": {
"self": {
"href": "https://us.api.blizzard.com/data/wow/media/item/19019?namespace=static-9.0.5_37760-us"
}
},
"assets": [
{
"key": "icon",
"value": "https://render-us.worldofwarcraft.com/icons/56/inv_sword_39.jpg",
"file_data_id": 135349
}
],
"id": 19019
}
The URL you want to put on your img element is https://render-us.worldofwarcraft.com/icons/56/inv_sword_39.jpg
like this:
<img src="https://render-us.worldofwarcraft.com/icons/56/inv_sword_39.jpg" />
so you must actually parse the returned json data before using it.
Unfortunately this can become very slow if the search term returns a lot of items, because for each item you would have to fetch the media, parse the response and return only the image URL.
It is possible to perform many concurrent requests in JS by spawning many fetch requests and waiting for them with Promise.all()
but you would have to limit them at 100req/s or the API would fail, since it seems you are just a beginner, it should be easier to just limit the item search to return 10-20 items.