vue 中audio.play() 控制台报错：播放音频的时候报错The element has no supported sources？

在vue项目给audio绑定个ref属性：
在需要动态绑定的方法里用$refs动态设置src

问题：

这样添加时，音频则无法播放

<template>   
 <div class="container">
  <audio
      :src="audioURL"
      id="audio"
      ref="audio"
    ></audio>
  </div>
</template>
<script>
export default {
  data() {
    return {
    };
  },
  mounted() {
     this.$refs.audio.src = "../assets/测试音频.mp3";
  },
  
};
</script>

解决：

则需要在vue项目给audio绑定个ref属性：
在需要动态绑定的方法里用$refs动态设置src在需要的地方调用即可

this.$refs.audio.src = require("../assets/测试音频.mp3");

总结：

为什么vue内的J在引用图片时为什么要require？？

使用require定义之后，你就可以动态使用了，不用require你就只能写死的

不用 :src="'../img/image.jpg'" 会被解析为字符串

<img src="../img/image.jpg"> // 正常加载

<img :src="'../img/image.jpg'"> // 动态地址，路径被加载器解析为字符串，图片找不到

所以需要采用如下操作：

src1：require('../img/image1.jpg'),

src2：require('../img/image2.jpg'),

index: 1,

<img :src="index = 0 ? src1: src2"> // 动态地址，正常加载