CODEWITHSUNDEEP
htmlreactjsgithub-pages
TOLULOPE ADETULA
TOLULOPE ADETULA

Reputation: 788

Images not showing up when i deploy my app to gh-pages

I've seen so many solutions but most involve relative links.

mine is an Image Url and I'm finding it difficult to load.

export const Card = (props) => (
    <div className = 'card-container'>
        <img src={`https:\\robohash.org/${props.monster.id}?set=set2&size=180x180`} alt="monster"/>
        <h2 > {props.monster.name}</h2>
        <p>
            {props.monster.email}
        </p>
    </div>

);

This is the error I get in my console

6:1 GET https://tooluloope.github.io/www.robohash.org/6?set=set2&size=180x180 404

Upvotes: 0

Views: 67

Answers (1)

Jake Worth
Jake Worth

Reputation: 5852

I think what's happening here is that the image source URL in the question's code is incorrectly formatted with backslashes (\\) instead of forward slashes (//). That breaks the protocol portion of the URL (https://), so the app concludes it's a relative link and tries to add it onto https://tooluloope.github.io/, creating https://tooluloope.github.io/www.robohash.org/.

Change:

https:\\robohash.org/

to:

https://robohash.org/

Upvotes: 1

Related Questions