react-image-gallery 加入视频图片混合显示

特别是在做商城项目的时候,会有需要带有视频跟图片一起的幻灯箱展示方式,如下:

幻灯使用地址 https://blog.csdn.net/lllomh/article/details/103958205

 

这个灯箱的用法是传入

数组来做的，上面是大图,下面是导航条图片!

正常情况下直接在这里增加 一个对象把original地址换成视频连接就好就行了.

但是会出现渲染在img中，报错。这就要修改插件了。

方式就是,在这里面增加一个type字段等于 video, 然后在插件里面渲染的地方去判断,是视频就渲染video标签,反之就是图片img标签.

先找到文件:

进去是在这里文件,在这个包文件中

这里默认会是fasle会执行下面的:

重点就是下面的  在 1315行

        item.imageSet ? _react2.default.createElement(//整个不会走true
          'picture',
          {
            onLoad: function onLoad(event) {
              return _this10.handleImageLoaded(event, item);
            },
            onError: handleImageError
          },
          item.imageSet.map(function (source, index) {
            return _react2.default.createElement('source', {
              key: 'media-' + source.srcSet + '-' + index,
              media: source.media,
              srcSet: source.srcSet,
              type: source.type
            });
          }),
          _react2.default.createElement('img', {
            className: 'image-gallery-image',
            alt: item.originalAlt,
            src: itemSrc
          })
        ) : (item.type=='video'? _react2.default.createElement(//判断是否就渲染视频
            'video',{
              className:'image-gallery-video',
              src:itemSrc,
              controls:'controls'
            }
            ):
            _react2.default.createElement('img', { //不是视频就渲染图片img
            className: 'image-gallery-image',
            src: itemSrc,
            alt: item.originalAlt,
            srcSet: item.srcSet,
            sizes: item.sizes,
            title: item.originalTitle,
            onLoad: function onLoad(event) {
              return _this10.handleImageLoaded(event, item);
            },
            onError: handleImageError
        })),

然后就可以渲染出视频图片混合的幻灯了