在Gatsby / React / Graphql中渲染来自同一阵列的图像和视频

Question

我有一个来自ContentQ的GraphQL嵌套数组，其中包含许多帖子。每个帖子包含（除其他事项外）图像数组，U循环渲染这些图像以为每个帖子创建幻灯片。到目前为止，一切都很好。但是我希望能够在幻灯片放映中混合视频和图像，所以我陷入了困境。视频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;
}