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>&l
·
在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"> // 动态地址,正常加载
更多推荐
已为社区贡献4条内容
所有评论(0)