Certain types of images aren't displayed correctly in HTML

Question

I'm new to front end development and am trying to display images from this API https://dash.valorant-api.com/endpoints/agents.

While images such as https://media.valorant-api.com/agents/5f8d3a7f-467b-97f3-062c-13acf203c006/displayicon.png work fine with the <img> tag, images such as:

https://media.valorant-api.com/agents/5f8d3a7f-467b-97f3-062c-13acf203c006/abilities/ability1/displayicon.png

https://media.valorant-api.com/agents/5f8d3a7f-467b-97f3-062c-13acf203c006/abilities/ability2/displayicon.png

Just show whitespace when I try to load them into the website, I understand it's something to do with the type of images, but I don't how to display them correctly.

Answer 1

Check up your html background color (ex: body { background-color: black; }, maybe its because you have white background color and two of the images are white symbols. By the way, the last photo does not work in any way. It returns an error with de api.