proper way to insert an image into an array set in react typescript-CodePudding

I'm trying to call a random image from an array set. It is calling them but their is some weird bug I cant figure out. It does call them but I do not think this is the proper syntax.

export function trumpImage() {
    var trumpSet = [
        <img src="../../public/imgs/animations/trump133.png" />,
        <img src="../../public/imgs/animations/trump15624.png" />,
        <img src="../../public/imgs/animations/trump233.png" />

         

    ];
    
    const trumps = Math.floor((Math.random() * trumpSet.length));
    var randomTrump = trumpSet[trumps];

  
    return (
        randomTrump
    )
}

CodePudding user response：

Can you try like this

export function trumpImage() {
  var trumpSet = [
    "../../public/imgs/animations/trump133.png",
    "../../public/imgs/animations/trump15624.png",
    "../../public/imgs/animations/trump233.png"
  ];

  const trumps = Math.floor((Math.random() * trumpSet.length));

  return trumpSet[trumps];
}

And use the function wherever you want to display in img tag like,

<img src={trumpImage()} />,

CodePudding user response：

Im an idiot.im using png and i didnt think the image dimension size mattered because i used an alpha channel to only use the actual frame of image, so the div was like 900px wide and that was causing the weird behavior. thanks everyone.