Компонент reactjs, содержащий тег <img>, загружает неправильный URL - PullRequest
0 голосов
/ 21 апреля 2020

Я обслуживаю свой сайт с example.org, построенный с reactjs 16.13.1 и машинописью.

У меня есть компонент, который отображает изображение, подобное этому:

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

Объект person JSON происходит из бэкэнда. 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>
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...