Problems with a dynamic path to an img :scr using Vue, when I deploy the application

Question

->Language: Vue
-> Problem: when I deployed the application to the verse website, the files in the /cover and /audio folders were not found. -> Context: I spent a few days trying to solve this problem, but I managed to find a solution

cover: "src/assets/cover/....,webp"

jealous of using

cover: "../assets/cover/....,webp"

, but apparently this only works when I run this application locally on my machine. When I decide to deploy to the back, it can't find these files.

---

I tried using some things like .require but I almost gave up because I have no idea how to solve it. I'll leave the path and some code I used.

[]-src
    |-[]assets
        |-[]cover
            |-{}teste.wepb
        |-[]music
            |-{}teste.webp

    |-[]components
        |-{}Releases.vue

Releases.vue component

<script>
import MusicCard from "./MusicCard.vue";
export default {
  components: { MusicCard },
  data() {
    return {
      tracks: [
        {
          title: "Track Name",
          artist: "Artist name",
          cover: "src/assets/cover/teste.webp",
          music: "src/assets/music/teste.ogg",
          linkSpotify:
            "http://link_example.com",
        }
      ],
    };
  },
};
</script>

<template>
  <div v-for="track in tracks" :key="track.id">
    <MusicCard
      :title="track.title"
      :artist="track.artist"
      :cover="track.cover"
      :music="track.music"
      :spotify="track.linkSpotify"
    />
  </div>
</template>

If you want to see the full code, here is the link:
https://github.com/Caio-Marianni/victorlou-landing-page

Answer 1

In Vue 3, the recommended way to include images in your components is to import them directly.

I just tried with your code, directly importing the image works fine, and a PR is here for your reference :)

See socaSocaShark is being imported directly below:

<script>
import MusicCard from "./MusicCard.vue";
import socaSocaShark from "../assets/cover/socaSocaShark.webp";
import socaSocaFunk from "../assets/cover/socaSocaFunk.webp";
import untitledTranceRemix from "../assets/cover/untitled(TranceRemix).webp";
import baileLotadao from "../assets/cover/baileLotadao.webp";

export default {
  components: { MusicCard },
  data() {
    return {
      tracks: [
        {
          title: "Soca Soca do Submundo (Shark Version)",
          artist: "Victor Lou, MC Theuzyn",
          cover: socaSocaShark,
          music: "src/assets/music/socaSocaShark.ogg",
          linkSpotify:
              "https://open.spotify.com/intl-pt/album/1KLyYfUuBmnSlwNEhtnaVU?si=7aVIx_lXRO6ENQM56T1a3A",
        },
        {
          title: "Soca Soca do Submundo (Funk Version)",
          artist: "Victor Lou, dJ GBR, MC Theuzyn",
          cover: socaSocaFunk,
          music: "src/assets/music/socaSocaFunk.ogg",
          linkSpotify:
              "https://open.spotify.com/intl-pt/album/6i4F2LcrVKA9I5ltZAEHWu?si=hBMQWm0IS-erHnM9XA34Zw",
        },
        {
          title: "Untitled (Trance Remix)",
          artist: "Victor Lou, Mazuk",
          cover: untitledTranceRemix,
          music: "src/assets/music/untitled(TranceRemix).ogg",
          linkSpotify:
              "https://open.spotify.com/intl-pt/album/6n9HAIjtM3wF1AY8QfXv7p",
        },
        {
          title: "Baile Lotadão",
          artist: "Victor Lou, Gesualdi",
          cover: baileLotadao,
          music: "src/assets/music/baileLotadao.ogg",
          linkSpotify:
              "https://open.spotify.com/intl-pt/album/7LWs9wqCZIUPsZAllaKjEY",
        }
      ],
    };
  },
};
</script>