реакция-изображение-лайтбокс не открывает видео или текст.Как заставить его работать и с видео?

Question

Я использую ответную картинку-лайтбокс для карусели в моем приложении.Как сделать так, чтобы этот компонент определял тип контента, такого как Видео, Изображения или PDF, Excels или Тексты.В настоящее время он работает только с изображениями.Пожалуйста помоги.Спасибо

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