GraphQL с React: как получить источник изображения - PullRequest
0 голосов
/ 12 марта 2020

Я не могу отобразить местоположение изображения в <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;
`;
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...