vue 组件 同时 支持 图片，视频播放,音频

  
视图层：
<el-image

              v-if="scope.row.panduan == 1"

              style="width: 200px; object-fit: contain"

              :src="scope.row.bidImages"

              :preview-src-list="[scope.row.bidImages]"

            ></el-image>

            <!-- m3u8 -->

            <!-- m3u8 -->

            <videoM

              v-if="scope.row.panduan == 4"

              :address="scope.row.bidImages"

              :id="scope.row.id"

            ></videoM>

            <!-- m3u8 -->

            <video

              v-if="scope.row.panduan == 3"

              :src="scope.row.bidImages"

              controls

              width="190px"

              height="70px"

              :autoplay="false"

            ></video>

            <audio

              :src="scope.row.bidImages"

              controls

              :autoplay="false"

              v-if="scope.row.panduan == 2"

            ></audio>
逻辑层：

   res.data.result.list.map((item) => {

            const FileExt = item.bidImages.replace(/.+\./, "");

            if (

              [

                "png",

                "jpg",

                "jpeg",

                "bmp",

                "gif",

                "webp",

                "psd",

                "svg",

                "tiff",

              ].indexOf(FileExt.toLowerCase()) > -1

            ) {

              item.panduan = 1;

              item.bidImageslist = item.bidImages.split(";");

              item.bidImages = item.bidImageslist[0];

            } else if (

              ["wav", "raw", "pcm", "mp3"].indexOf(FileExt.toLowerCase()) > -1

            ) {

              item.panduan = 2;

            } else if (["m3u8"].indexOf(FileExt.toLowerCase()) > -1) {

              item.panduan = 4;

            } else {

              item.panduan = 3;

            }

            console.log(this.tableData);

            return (this.tableData = res.data.result.list);

          });

接口返回格式：