Adding images to react app based on random selection

Question

So, I have an app that randomly selects pokemon from a list to build a team of pokemon for the user.

I know how to import images to use in a react app. But how would I serve an image to a user using react? I have the sprites located in two separate places currently because I was trying to see if I needed to send from the client or server side. But my file structure is as follows

client/
   src/
     components/
        sprites/
        pokemon.js
server.js
sprites/

When the page loads, it requests a random pokemon from the server. Then this code executes

<h2>Pokemon</h2> 
              <ul>
                {this.state.pokemon.map(pokemon => 
                  <li key={pokemon.id}> <img src={'./sprites/' + pokemon.name + '.png'} alt={pokemon.name}></img> {pokemon.name} {pokemon.galar_dex} </li>
                )}
              </ul>
              <br/>

But instead of showing an image, I am shown the alt text. How would I serve an image to the user this way?

zrna · Accepted Answer · 2020-10-03 20:18:46Z

1

You can do something like this

<img src={require(`./sprites/${pokemon.name}.png`)} alt={pokemon.name} />

answered Oct 3, 2020 at 20:18

zrna

6042 gold badges9 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Adding images to react app based on random selection

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related