reactjs - 包含标签的 reactjs 组件加载了错误的 url

Question

我正在为我的网站提供服务example.org，使用 reactjs 16.13.1 和 typescript 构建。

我有一个显示如下图像的组件：

<img alt={""} className={"person-image"} src={person.imageUrl}/>

JSON 对象来自person后端。ImageUrl 是一个如下所示的 url https://example.org/api/data/24361/img.jpg：. 图像通过 Spring Boot 控制器提供。

图像无法加载，因为由于某种原因它被重写为：https://example.org/example.org/api/data/24361/img.jpg

为什么会example.org被重复？

我检查了从服务器返回的 JSON 并且 url 是正确的：https://example.org/api/data/24361/img.jpg

如果我将 url 复制粘贴到浏览器上，它会正确加载，所以这不是反向代理问题，或者似乎不是。

如果我在将 url 传递给之前将其记录在控制台上<img>，则它是正确的。

我从外部域加载了一些其他图像，它们加载没有任何问题。

<img>如果图像来自同一个域并且正在使用绝对 url，那么标签是否对 url 进行了某种重写？有什么我在监督的吗？

编辑：组件代码

interface PersonProps {
    person: PersonData
    clickable?: boolean
}

export function Person({person}: PersonProps) {
    const actions = [
        new Action(
            <><FullscreenOutlined/> Full</>,
            () => {
                // opens wrong url https://example.org/example.org/api/data/24361/img.jpg
                const win = window.open(person.imageUrl, '_blank'); 
                win?.focus();
            }
        )
    ]

    // prints https://example.org/api/data/24361/img.jpg
    console.log(person.imageUrl)
    return <Wrapper
        actions={actions}>
        {/* loads wrong url https://example.org/example.org/api/data/24361/img.jpg */}
        <img alt={""} className={"person-image"} src={person.imageUrl}/> 
        <div className={"person-body"}>
            {person.name}
        </div>
    </Wrapper>
}

标签： reactjstypescriptimagespring-boot