vite反应动态图片url

大家好，我遇到了 vite React 动态图像 url 无法正确加载的问题，这就是我的组件

 <Flex>
      {data?.map((tag) => (
        <Box key={tag._id}>
          <Image w="150px" h="150px" src={`http:localhost:5000/${tag.imageUrl}`}></Image>
        </Box>
      ))}
    </Flex>

当我检查网络选项卡时，我看到客户端的 url 已添加到图像 url 中

http://localhost:3000/localhost:5000/uploads/1623642756947--Capture.PNG

在创建反应应用程序中也许我们可以使用reqiure()解决这个问题，但我不知道如何解决这个问题并添加reqiure()抛出一个错误

实际上，您可以通过模板文字使用动态 URL 模式。对于您的情况来说，它可能是这样的：

function getImgUrl(name) {
   return new URL(`${name}`, import.meta.url).href
}

<Flex>
  {data?.map((tag) => (
    <Box key={tag._id}>
      <Image w="150px" h="150px" src={ getImgUrl(tag.imageUrl) }></Image>
    </Box>
  ))}
</Flex>