Я обслуживаю свой сайт с 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>
}