將圖像插入反應打字稿中的數組集的正確方法

Question

我正在嘗試從數組集中調用隨機圖像。 它正在打電話給他們，但他們是一些我無法弄清楚的奇怪錯誤。 它確實調用了它們，但我認為這不是正確的語法。

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

Answer 1

你能這樣試試嗎

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()} />,

Answer 2

我是一個使用 png 的 idiot.im，我認為圖像尺寸大小無關緊要，因為我使用 alpha 通道只使用實際的圖像幀，所以 div 就像 900px 寬，這導致了奇怪的行為。 感謝大家。