Рендеринг изображений и видео из одного массива в Gatsby / React / Graphql

Question

У меня есть вложенный массив с помощью GraphQL от Contentful, содержащий несколько постов.Каждый пост содержит (среди прочего) массив изображений, которые вы отображаете в цикле для создания слайд-шоу для каждого поста.Все идет нормально.Но я хочу иметь возможность смешивать видео и изображения в слайд-шоу, и я застрял.URL src видео ломает тег изображения и наоборот.Есть ли способ условно использовать тег изображения или видео на основе данных graphQL?Или другое решение?

Answer 1

Я предполагаю, что у вас есть функция, которая сообщает вам тип файла (видео / изображение).Пусть эта функция будет getFileType(src):

const renderContent = (src) => {
    const fileType = getFileType(src);
    if (fileType == "image") {
        return <img src={src} />;
    } 
    else if (fileType == "video") {
        return <video><source src={src}></source></video>;
    }
    return null;
}