在 Gatsby/React/Graphql 中渲染来自同一数组的图像和视频答案

【问题标题】：Rendering images and videos from same array in Gatsby/React/Graphql在 Gatsby/React/Graphql 中渲染来自同一数组的图像和视频
【发布时间】：2020-01-27 00:01:18
【问题描述】：

我有一个通过 GraphQL 来自 Contentful 的嵌套数组，其中包含许多帖子。每个帖子都包含（除其他外）一组图像，U 在循环中渲染这些图像，为每个帖子创建幻灯片。到目前为止，一切都很好。但我希望能够在幻灯片中混合视频和图像，但我被卡住了。视频 src url 会破坏图像标签，反之亦然。有没有办法根据 graphQL 数据有条件地使用图像或视频标签？还是其他解决方案？

【问题讨论】：

GraphQL 响应是否包含内容类型？
不，但我可以从以下位置提取扩展名：... items visuals { localFile { extension } } }

标签： reactjs graphql gatsby

【解决方案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;
}

【讨论】：