Vue-cli - 如何链接本地图像

Question

我使用 vue-cli 创建了 vue 应用程序，我使用 vue 仪表板链接库，其中之一是 Fake3D ( https://luxdamore.github.io/vue-fake3d-image-effect/ )

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

我的代码是：

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

我在控制台中收到以下错误：

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

文件夹src位于项目根目录中。 我如何需要链接项目图像？

Answer 1

有关如何解析静态资产的详细说明，请参阅此文档： https : //cli.vuejs.org/guide/html-and-static-assets.html#relative-path-imports

问题是，当你写src/assets/images/effects/3d.jpg ，Vuejs 会在你电脑的根文件夹中搜索该文件。 它不会在项目的 src 文件夹中搜索它。

查看这 3 点以获得更好的理解： https : //cli.vuejs.org/guide/html-and-static-assets.html#url-transform-rules

• 如果您的图像位于项目之外，那么您将使用静态路径。
• 由于您的图像位于src文件夹中，因此您可以编写@/assets/images/effects/3d.png 。 如果使用 vue-cli， @将转换为/src文件夹。
• 如果您的图像在其他地方，那么您应该使用./符号创建正确的相对路径以正确访问文件。