Я не могу отобразить местоположение изображения в <img src="" />
, когда пытаюсь подключить его через GraphQL. В DOM он пуст.
Все мои изображения хранятся в /src/static/img/
в дереве каталогов.
У меня есть массив LOCATIONS
с группой объектов как таковой:
const LOCATIONS = [
{
name: 'Atlanta',
geo: 'United States',
image: 'img/flags/us_flag.svg'
},
{
name: 'New York',
geo: 'United States',
image: 'img/flags/us_flag.svg'
},
]
И моя схема выглядит так:
const schema = buildASTSchema(gql`
type Query {
locations: [Location]
location(id: ID!): Location
}
type Location {
id: ID
name: String
geo: String
image: String
}
`);
const mapLocation = (location, id) =>
location && { id, ...location };
const root = {
locations: () => LOCATIONS.map(mapLocation),
location: ({ id }) => mapLocation(LOCATIONS[id], id)
};
При загрузке данных на страницу все работает, кроме изображения:
export const GET_LOCATIONS = gql`
query GetLocations {
locations {
id
name
geo
image
}
}
`;
export default () => (
<Query query={GET_LOCATIONS}>
{({ loading, data }) =>
!loading && (
<ContainerDiv>
{data.locations.map(location => (
<FlexDiv key={location.id}>
<div>
<Svg src={location.image} />
</div>
<TextDiv>
<h3>{location.name}</h3>
<p>{location.geo}</p>
</TextDiv>
</FlexDiv>
))}
</ContainerDiv>
)
}
</Query>
);
Я используя стилевые компоненты, но <Svg>
является тегом изображения:
const Svg = styled.img`
width: 8rem;
min-width: 4rem;
`;