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

Question

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

标签： reactjsgraphqlgatsby

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;
}