当我部署应用程序时，使用 Vue 的 img :scr 动态路径存在问题

Question

->语言：Vue
-> 问题： 当我将应用程序部署到 verse 网站时，找不到 /cover 和 /audio 文件夹中的文件。 -> 上下文： 我花了几天时间尝试解决这个问题，但我设法找到了解决方案

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

嫉妒使用

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

，但显然这只有当我在我的机器上本地运行这个应用程序时才有效。当我决定部署到后面时，它找不到这些文件。

---

我尝试使用一些像 .require 这样的东西，但我几乎放弃了，因为我不知道如何解决它。我将留下路径和我使用的一些代码。

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

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

发布.vue 组件

<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>

如果您想查看完整代码，请点击以下链接：
https://github.com/Caio-Marianni/victorlou-landing-page

Answer 1

在 Vue 3 中，在组件中包含图像的推荐方法是直接导入它们。

我刚刚尝试了你的代码，直接导入图像就可以了。

看到

socaSocaShark

正在直接导入下面：

<script>
import MusicCard from "./MusicCard.vue";
import socaSocaShark from "../assets/cover/socaSocaShark.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",
        },