Image does not display?

[Seiyaroo]

Hi there,

Recent grad student working a bit of a personal project using the API. Looking to build out a sort of compendium (original I know lol) but in grabbing information from the API I noticed some does not display. Also finding that description doesn't seem to update for every piece.

To be fair, I'm newish to utilizing API's for a full fledged project so, bare with me. Any insight into things as I continue to tweak and read the docs would be helpful. Would also love to contribute!

[fergcb]

A little more detail about exactly what you expect to see and how the actual results differ would be great! Also a link to the code or some snippets of the relevant code would help us figure out what's going wrong :)

It's also worth nothing that only some of the monsters in the API have images at the moment! Adding images is an ongoing project for us, and quite slow moving as it's hard to source free, distributable art for so many monsters!

[Seiyaroo]

Hey there! Sorry yeah I shoulda had some code up but if the issue is not everything has images, that's probably why I wasn't seeing it for instance on Aboleth.

export default function MonsterCard({ monster }) {
    return (
        <li className="card">
            <hgroup>
                <h4>{monster.name}</h4>
                <small>
                    {monster.challenge_rating > 0}
                </small>

                {/*Use once a repo of images can be utilized.*/}
                {/*or find out why its not loading an image into the card*/}

                {/*<small>*/}
                {/*    {monster.image}*/}
                {/*</small>*/}
            </hgroup>
            <div className = "stats">
                <small>
                    <strong>Size: </strong>
                    {monster.size}
                </small>

That's the important parts I snipped.

This is what it looks like once I uncomment the relevant bits.

[fergcb]

No, Aboleth does actually have an image (which you can see with your code - the url for the image is being displayed on the page)!

The issue is that you're just displaying the text of the image URL on the screen, instead of rendering an image tag. Try this:

export default function MonsterCard({ monster }) {
    return (
        <li className="card">
            <hgroup>
                <h4>{monster.name}</h4>
                <small>
                    {monster.challenge_rating > 0}
                </small>

                {monster.image && <img src={monster.image} alt={`An image of a ${monster.name}`} />}
            </hgroup>
            <div className = "stats">
                <small>
                    <strong>Size: </strong>
                    {monster.size}
                </small>

The new code is this:

{monster.image && <img src={monster.image} alt={`An image of a ${monster.name}`} />}

What it does is that it checks if monster.image is truthy (i.e. not null or undefined), and so, renders an image using the HTML img tag with the src attribute set to the URL of the image given by the API.

[Seiyaroo]

Ohhhhh I see. Sorry JS is a bit "new" to me in that I haven't used it since Pre Ecma 6 days haha. So then I see it being brought in sort of.

Its being brought in however as Text/HTML which is obviously incorrect, so maybe something wrong in my respective monstercard.js?

[fergcb]

Ah, I see what the issue is. The image URL is just the path of the image, and doesn't include the domain, so you also need to add in the base URL of the API:

{monster.image && <img src={'https://www.dnd5eapi.co' + monster.image} alt={`An image of a ${monster.name}`} />}

[Seiyaroo]

This was the correct method! Thank you @fergcb . Mind if I ask where within the docs you found this? I wanna be less "answer an easy question" and more "couldn't find the answer in XYZ" and then ask questions.

[fergcb]

There are kind of a few things you need to know to solve this issue.

First, we need to know what the monster.image property actually is. You could find this in the docs, or just by console.loging the data and visually inspecting it. Doing either of these, we can see that image is an optional string containing the URL of the monster's image.

The next thing we need to know, then is how to take an image URL and render it in an HTML page. We do that with the img tag. I like the Mozilla Developer Network Web Docs if I need to read up about HTML, JS Web APIs, or CSS. Reading those docs, you can see that the img tag takes a src attribute, which is the URL of the image.

Finally, we need to know how to conditionally render this in React, which we can find in the React docs.