javascript - 为什么我的音频标签在硬编码时加载源代码，而不是在 Vue.js 提供时加载源代码？

Question

我创建了一个组件，该组件中有一个音频标签。我一直在尝试将 mp3 的文件路径从其父组件传递到组件，但由于某种原因，音频元素似乎无法成功加载文件。该元素最终变灰，我没有收到任何错误。我知道属性已成功传递，因为我还传递了轨道的标题，并且在组件中加载得很好。但是，如果我对源代码中的相同路径进行硬编码，那么它就可以正常工作。这没什么大不了的，但我有 11 条轨道要做，使用 v-for 语句会容易得多。

这是我的父组件:

    <template>
    <div container>
        <div class=banner>
            <img src="../assets/CryptoLogo2.svg"/>
        </div>
        <div class="albumcontainer">
          <div class="covercontainer"><img src="../assets/TIADCover(Final).png"/></div>
          <div class="arrow"></div>
          <div class="tracklistcontainer">
            <table class="tracklist">
              <tr class="track" v-for="track in tracks" :key="track.file"  style="padding: 20px;">
                <td>
                  <player :name="track.name" :file="track.file" />
                </td>
              </tr>
            </table>
          </div>
        </div>
        <div class="bio">
          <p>
          </p>
        </div>
        <div class="footer">
          <div class="footericons">
            <img src="../assets/icons/Facebook.svg" />
            <img src="../assets/icons/Instagram.svg" />
            <img src="../assets/icons/Twitter.svg" />
          </div>
        </div>
  </div>
</template>

<script>
import player from './player'
    export default {
  name: "Album1",
  data() {
    return {
      tracks: [
        {
          name: '5G',
          file: '../assets/tracks/5G.mp3'
        }
      ]
    }
  },
  components:{
    player
  }
};
</script>

然后是带有音频标签的组件:

<template>
    <div>
        <h3>{{ name }}</h3>
        <audio controls controlsList="nodownload">
            <source ref="player" v-bind:src="file" type="audio/mpeg">
        </audio>
    </div>
</template>

<script>
export default{
    name: "player",
    props: {
        name: {
            type: String,
            default: null
        },
        file:{
            type: String,
            default: null
        }
    }
}
</script>

这里可以看到我的数据传递成功了。

您会看到源属性也被正确加载。

这是我得到的，您可以看到 h3 加载正常，所以我知道数据正在传递。但是该元素是灰色的。

为了测试它，我尝试对文件路径进行硬编码:

<source src="../assets/tracks/5G.mp3">

这很好用:

但我不想那样做，因为我有大约 11 条轨道要做，所以我希望它从传递的数据中加载，以便我可以重用该组件。有什么想法吗？

Answer 1

尝试在你的 Vue v-for 中使用类似的东西我在 src 没有加载到 img 标签上时使用它。

:src="getSrc(x.src)"

---

  methods: {
   getSrc(src) {
     return require("../assets/" + src);
   }
 }