reactjs - react-image-lightbox 不打开视频或文本。如何使其也适用于视频

Question

我在我的应用程序中使用 react-image-lightbox 进行轮播。如何使该组件识别视频、图像或 PDF、Excel 或文本等内容的类型。目前它仅适用于图像。请帮忙。谢谢

Answer 1

我们需要根据扩展类型过滤类型，然后将其传递给轮播。例如：

getCrouselItems(documents){
var items=[];
documents.forEach(element => {
  switch(CommonUtils.getFileFormat(element)){
    case "image":
    items.push(AjaxUtils.getImageURL(element));
        break;
    case "video":
    var videoUrl=AjaxUtils.getImageURL(element);
    items.push(<video className="attachments" controls><source src={videoUrl}/>
            </video>)
        break;
    case "pdf":
    items.push(<img className="attachments" src={pdf}></img>)
        break;
    case "excel":
    items.push(<img className="attachments" src={excel}></img>)
        break;
    case "word":
    items.push(<img className="attachments" src={text}></img>)
        break;
    case "others":
    items.push(<img className="attachments" src={excel}></img>)
        break;
    default:
  }
});
 return items;
}