Vuejs2 Vue cli-如何链接本地映像

我使用vue cli创建了vue应用程序，我使用vue仪表板链接库，其中一个是Fake3D（）

当我使用外部图像时，它工作正常，但当我使用本地图像时，它显示空白

我的代码是：

<template>
  <div>
    <fake3d-image-effect
        v-once
        centered
        fill-height-content
        image="src/assets/images/effects/3d.jpg"
        image-map="src/assets/images/effects/3dmap.jpg"
    >
    </fake3d-image-effect>
  </div>
</template>

<script>

    import '@luxdamore/vue-fake3d-image-effect/dist/Fake3dImageEffect.css';

    export default {
        name: "Effects3D",
    }
</script>

导入“@luxdamore/vue-fake3d-image-effect/dist/Fake3dImageEffect.css”；
导出默认值{
名称：“效应3d”，
}

控制台中出现以下错误：

Unable to load image <img crossorigin=​"Anonymous" src=​"src/​assets/​images/​effects/3d.jpg">​

无法加载图像​

---

文件夹

src

位于项目根目录中。如何需要链接项目图像？

有关如何解析静态资产的详细说明，请参阅本文档：

问题在于，当您编写

src/assets/images/effects/3d.jpg

时，Vuejs会在计算机的根文件夹中搜索该文件。它不会在项目的src文件夹中搜索它

要更好地理解，请参见以下三点：

• 如果图像位于项目外部，则将使用静态路径
• 由于图像位于

  src

  文件夹中，因此可以编写

  @/assets/images/effects/3d.png

  。如果使用vue cli，

  @

  将转换为

  /src

  文件夹
• 如果图像位于其他位置，则应使用

  /

  符号创建正确的相对路径，以正确到达文件