Question

我有一个图像，音频和视频的集合，应该由组件一一显示。所有媒体都放置在assets子目录中。

为图像提供简单的Vue组件：

<template>
  <img :src="src" :alt="src"></a>
</template>

<script>
  export default {
  name: "ImgDisplay",
  props: ['src']
 }
</script>

如果我尝试在某些页面上使用它：

<template>
  <ImgDisplay src="~/assets/test.png"/>
</template>

实际上未显示图像。

用于MP3文件的Vue组件如下所示：

<template>
  <vue-plyr>
    <audio controls>
      <source :src="src" type="audio/mp3"/>
    </audio>
  </vue-plyr>
</template>

<script>
  export default {
    name: "PlyrAudio",
    props: ['src']
  }
</script>

然后在文档中我有

<template>
  <div>
      <article class="infobox">
        <h6>Recording 1</h6>
        <PlyrAudio src="~/assets/media/recording-1.mp3"/>
      </article>
      <article class="infobox">
        <h6>Recording 2</h6>
        <PlyrAudio src="~/assets/media/recording-2.mp3"/>
      </article>
   </div>
</template>

<script>
  import PlyrAudio from "../components/media/PlyrAudio";
  export default {
    name: "PlyrAudioTest",
    components: {PlyrAudio}
  }
</script>

这也不起作用，PlyrAudio组件似乎找不到引用的mp3文件。

如何在组件属性中使用Nuxt.js别名（〜，~~，@，@@）？在{{1}中是否有一些专用函数来解析~ <script>和ImgDisplay的}部分，还是我遗漏了一些东西？

在组件属性中使用Nuxt.js别名

0 个答案: