VUE動態綁定audio/video/img的src不能播放或顯示

寫個項目，要求要本地上傳音視頻至服務器，再回顯可播放。
當前項目使用了elementUI+Vue
上傳圖片，請求接口，將圖片或者音頻文件提交給後臺，後臺返回存儲圖片或者音頻的ID，由於後臺存到mogondb裏面了，因此返回的是ID，若是存到服務器裏面，返回的就是圖片或者是音頻存到服務器的地址。回顯圖片的方式是，先請求接口，根據圖片的ID，請求接口圖片或者是音頻返回的內容，請求接口返回的內容爲一個圖片或者是音頻。
圖片以下：

頁面顯示的內容：

由於接口都是直接返回圖片和音頻，因此你不能用get請求，只能直接拼接到標籤後邊。

圖片回顯代碼以下：

<template>
  <el-upload
     class="avatar-uploader"
     :action="fileurl"
     :data="file"
     :show-file-list="false"
     :before-upload="beforeAvatarUpload"
     :on-success="handleAvatarSuccess"
     :on-error="handleAvatarError">
     <img v-if="imageUrl" :src="imageUrl" class="avatar">
     <i v-else class="el-icon-plus avatar-uploader-icon"></i>
  </el-upload>
</template>

<script>
    import api from '../../../../../../utils/env.js';
    export default {
        name:'',
        props:[],
        components:{
            
        },
        data(){
            return{
                'iconid':'123'
                'fileurl':api+"/mongodbfile/uploadtomongo", //上傳圖片的接口地址
                'file': {
                    'file': ''
                },  // 上傳圖片傳遞的參數
                'imageUrl': '', //回顯的圖片的URL
            }
        },
        computed:{
            
        },
        created(){
            
        },
        mounted(){
           if('新建活動'){
              console.log('新建不調用回顯圖片接口');
           }else{
             console.log('編輯活動須要調用圖片接口');
           } 
        },
        methods:{
            // 編輯頁面調用圖片回顯接口
            getUrlParams() {
              //自定義圖片編輯回顯的接口和iconid動態ID
              this.imageUrl = api+'/mongodbfile/downloadfromMongo?id='+this.iconid;  
            },
            
            //上傳文件校驗
            beforeAvatarUpload(file) {
                const isJPG = file.type;
                var isFlag = false;

                if (isJPG=='image/jpeg'||isJPG=='image/png') {
                   isFlag=true;
                }else{
                    this.$message.error('上傳頭像圖片只能是 JPG | PNG 格式!');
                    isFlag=false;
                }
                //console.log(isJPG||isPNG);
                return isFlag;
            },
            //上傳圖片成功
            handleAvatarSuccess(res, file) {
                //console.log(res);
                if(res.flag=='true'){
                    this.imageUrl = URL.createObjectURL(file.raw);
                    //圖片上傳成功以後，從新給iconid 賦值
                    this.iconid = res.data;
                }else{
                    this.$message.error(res.mes);
                }
            },
             //上傳圖片失敗
            handleAvatarError(res, file){
                this.$message.error('上傳失敗！');
            }, 
        },
        watch:{
           
        }
    }
</script>
<style scoped>

</style>

Vue音頻動態加載踩到的坑，回顯音頻的時候也是和回顯圖片同樣的方法，可是音頻的資源沒有加載進來，一直沒有聲音，最後使用了動態拼接音頻標籤的方法，將音頻文件加載進來了。
代碼以下：

<template>
  <div id="zomain">
    
  </div>
</template>
<script>
  import api from '../../../utils/env.js';
  import axios from 'axios';
  export default {
        name:'',
        components:{
            
        },
        data(){
            return{
                
            }
        },
        filters:{
          
        },
        created(){
          
        },
        mounted(){
            
        },
        methods:{
             init(){
                 this.musicSrc = api + '/mongodbfile/downloadfromMongo?id='+soundid;
                 let audioDom = 
                 "<audio id='zo-audio' loop='loop' autoplay>"+
                  "<source id='audioSource' src='"+ this.musicSrc +"' type='audio/mp3'>"+
                 "</audio>";
                $('#zomain').append(audioDom);
                //蘋果手機音頻兼容性
                document.addEventListener("WeixinJSBridgeReady", function () { 
                 $('#zo-audio').get(0).play();
                 }, false);
             } 
        }
    }
</script>
<style scoped>

</style>