0

I keep my mp3 files and image under static file. I can reach my images with below method but i can not reach my mp3 files. I did some settings on nuxt.config.js but still i cant reach mp3 files .

index.vue

   <v-col v-for="i in 28" :key="i" >
    <v-card  active-class="active">
      <v-img :src="require(`@/static/drawable/pic-${i}.png`)" />
      <audio :src="music[i].src" controls/>
    </v-card>
   <v-col/>

<script>
import music from "~/constants/musics.js";

export default {
    setup(){
    
   return{
      music
     }

   }
}
<script/>

*audio output => <audio data-v-14f3866a="" src="[object Module]" controls="controls"></audio>*

music.js

const listOfMusic = [
  {
    src: require("@/static/music/adele.mp3"),
  }
........
];

export default listOfMusic;

nuxt.config.js

    extend (config, { isDev, isClient }) {
      config.module.rules.push({
        test: /\.(ogg|mp3|wav|mpe?g)$/i,
        loader: 'file-loader',
        query: {
          name: 'static/raw/[name].mp3'
        }
      })
    },

if i import music files one by one , they will work but this method is expensive for me

import adele from '@/static/raw/adele.mp3'
oktay tontaş
  • 271
  • 2
  • 16
  • Nuxt2 here I guess? You should not use `static` tbh but rather `/raw/adele.mp3` directly. – kissu Dec 04 '22 at 16:09
  • @Mises I know ref nd reactive . i didnt understand what u meant – oktay tontaş Dec 04 '22 at 17:46
  • @kissu how to use /raw/adele.mp3 directly . it gives error . – oktay tontaş Dec 04 '22 at 17:47
  • 1
    Use the path directly without any `@` or `static` in it as explained here: https://nuxtjs.org/docs/directory-structure/static#static-assets aka `/raw/adele.mp3` – kissu Dec 04 '22 at 17:48
  • @Mises OP can totally write Options API if it's their preference, no obligation to use ref/reactive. Also, `require` is fine for dynamic assets if using Webpack. Regarding the `extend`, seems like it's Webpack. So all good on both those points. – kissu Dec 04 '22 at 18:14
  • Yeah, not really using `CAPI` that much haha. Also, `require` is indeed the way to go to load dynamic assets with webpack: https://stackoverflow.com/a/57567343/8816585 @Mises – kissu Dec 04 '22 at 18:48

1 Answers1

1

You should reference your asset directly using /raw/adele.mp3 as explained in the docs: https://nuxtjs.org/docs/directory-structure/static/#static-assets

No need for a static in your path.

kissu
  • 40,416
  • 14
  • 65
  • 133