将图像插入react typescript中的数组集的正确方法

rn0zuynd  于 2022-12-24  发布在  TypeScript
关注(0)|答案(2)|浏览(138)

我试着从一个数组中调用一个随机的图像。它调用了它们,但是有一个奇怪的错误,我搞不清楚。它确实调用了它们,但是我不认为这是正确的语法。

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
    )
}
8tntrjer

8tntrjer1#

你能这样试试吗

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];
}

在img标签中任何你想显示的地方使用这个函数,比如,

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

3zwtqj6y2#

我用的是png,我不认为图像的尺寸大小很重要,因为我用了一个alpha通道,只使用图像的实际帧,所以div像900px宽,这导致了奇怪的行为。谢谢大家。

相关问题