reactjs - React.js/Typescript：如何渲染文件夹中的图像以及使用 url 上传的图像？

Question

我正在编写一个显示仓鼠图片的小游戏。我有一个包含图片的资产文件夹，但用户也可以添加新的仓鼠对象，在这种情况下，他们将添加一个 url 作为图像。

我的问题是我不知道如何同时渲染带有 url 的图像和文件夹中的图像，因为要渲染文件夹中的图像，我必须为其添加一个路径，然后网址不起作用：

const HamsterCard = ({ hamster }: CardGridProps) => {
    return (
        <div className="galleryCard">
            <img src={'assets/hamsters/' + hamster.imgName} alt={'Picture of ' + hamster.name} />
            <h2>{hamster.name}</h2>
        </div>
    )
}

我试过使用 onerror 并添加一个没有路径的替代 src，但我无法让它工作。

onError={(e)=>{e.target.onerror = null; e.target.src=hamster.imgName}}

我收到“onerror”和“src”的错误，说这些属性在“EventTarget”类型上不存在。

任何人都知道如何让我的图像渲染？

提前致谢！

标签： reactjstypescriptimagesrc