时间戳

首页 > 解决方案 > 在组件属性中使用 Nuxt.js 别名

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

问题描述

我有一组图像、音频和视频，应该由一个组件一个一个地显示。所有媒体都放置在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 别名（~、~~、@、@@）？是否有一些专门的功能可以解决，~或者我错过了什么？<script>ImgDisplayPlyrAudio

标签： aliasnuxt.js

解决方案

推荐阅读