IMG src from png file interpolated to change depending on string received from an API

Question

I am creating a bulbapedia clone as a side project.

I am trying to have the results page display buttons for the pokemon's typing. As such, I have each button type saved as a little png in an assets/typeBadges folder.

I have all of them bundled in one folder, with an index file exporting them all. I imported the index file into the TypeBadges file.

I am pulling data from pokeapi v2, and then it maps over the results so that I have an array with the one or two types that the pokemon is. (bulbasaur, for example is grass and poison, so I have typesArray with ['grass', 'poison']

How can I make my IMG src correlate to the string(s) in the array? (each button is named for its type exactly, down to casing)

Here is what I have:

import React, {useEffect} from "react";
import '../assets/TypeBadges/index.js';

const TypeBadges = (props) => {
    const {result} = props; 

    const typeArray = [];

    useEffect(() => {
    result.types.map((type, idx) => (
        typeArray.push(type.type.name) ))
        console.log(typeArray)}, [])


    return (
        <div className="type-badges">
            <img src ={buttonforTypeArray[0]} />   
            {typesArray[1] ? <img src={buttonforTypeArray[1]} /> : null }
        </div>
    )
}

export default TypeBadges;

obviously I dont expect "buttonfortypearray[0]" to work, it's just filler for the sake of the question.

I was thinking of interpolating something like

But the problem I run into is that the typesArray[0] and typesArray[1] end up being strings, which messes up any kind of interpolation or pathing I can think of.

Any help would be greatly appreciated.

Edit: also adding the index file that i'm importing, if that helps/matters.

export {default as dark} from './Dark.png'
export {default as dragon} from './Dragon.png'
export {default as electric} from './Electric.png'
export {default as fairy} from './Fairy.png'
export {default as fighting} from './Fighting.png'
export {default as fire} from './Fire.png'
export {default as flying} from './Flying.png'
export {default as ghost} from './Ghost.png'
export {default as grass} from './Grass.png'
export {default as ground} from './Ground.png'
export {default as ice} from './Ice.png'
export {default as normal} from './Normal.png'
export {default as poison} from './Poison.png'
export {default as psychic} from './Psychic.png'
export {default as rock} from './Rock.png'
export {default as steel} from './Steel.png'
export {default as water} from './Water.png'

Emin M · Answer 1 · 2023-04-20T21:46:51.867

0

I would use the import as below for immediate solution. Something like:

import imageName from './whatever/assets/imageName.png';

Then use it in src like:

<img src={imageName} />

I don't know how it may work in the way you export them.

edited Apr 20 '23 at 21:46

answered Apr 20 '23 at 21:42

Emin M

17
4

This would only work if the img src didn't depend on the results of the API pull. I search bulbasaur, it comes with back with all the results, somewhere in there is type > "grass", "poison". So I have the images for each of those types, and I want to make the IMG src be the png correlating to the types received from the API. i suppose it could work if I wrote the longest conditional statement ever, lol which if i can't find a more streamlined way, I may have to do. – Brittany Hilliard Apr 20 '23 at 21:44
I see, Then You might have a look at this here: https://stackoverflow.com/questions/53775936/import-image-dynamically-in-react-component – Emin M Apr 20 '23 at 21:50
This might work! I will give it a try and update this accordingly – Brittany Hilliard Apr 20 '23 at 21:58

score 0 · Answer 2 · answered Apr 21 '23 at 00:53

I was able to figure out the answer. I mapped each type out in an object, used the map() method to extract the type names from the result and store them in the typeArray variable.

Next, check if typeArray[1] exists for dual typing and use the typeImageMap to render the correct images source based on the typeArray[0/1] value(s).

So ultimately had 18 imports, one png for each type, then:

    const typeArray = result.types.map((type) => type.type.name);
    const typeImageMap = {
        bug,
        dark,
        dragon,
        electric,
        fairy,
        fighting,
        fire,
        flying,
        ghost,
        grass,
        ground,
        ice,
        normal,
        poison,
        psychic,
        rock,
        steel,
        water,
      };

/// and then in the render: 

        <div className="type-badges">
            <div className="badgeOne">
                <img src={typeImageMap[typeArray[0]]} alt={typeArray[0]} />
            </div>
            <div className="badgeOne">
            {typeArray[1] && (
                <img src={typeImageMap[typeArray[1]]} alt={typeArray[1]} />
                )}  
            </div>
        </div>

IMG src from png file interpolated to change depending on string received from an API

2 Answers2