如何在 Vue 单文件组件中导入和使用图片？

Question

我认为这应该很简单，但是我在如何在 Vue 单文件组件中导入和使用图像时遇到了一些麻烦。有人可以帮我怎么做吗？这是我的代码片段：

 <template lang="html">
    <img src="zapierLogo" />
</template>

<script>
    import zapierLogo from 'images/zapier_logo.svg'

    export default {
    }
</script>

<style lang="css">
</style>

我曾尝试使用 :src ， src="{{ zapierLogo }}" 等。但似乎没有任何效果。我也找不到任何例子。有什么帮助吗？

原文由 aks 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

很简单：

 <template>
    <div id="app">
        <img src="./assets/logo.png">
    </div>
</template>

<script>
    export default {
    }
</script>

<style lang="css">
</style>

取自 vue cli 生成的项目。

如果您想将图像用作模块，请不要忘记将数据绑定到您的 Vuejs 组件：

 <template>
    <div id="app">
        <img :src="image"/>
    </div>
</template>

<script>
    import image from "./assets/logo.png"

    export default {
        data: function () {
            return {
                image: image
            }
        }
    }
</script>

<style lang="css">
</style>

还有一个较短的版本：

 <template>
    <div id="app">
        <img :src="require('./assets/logo.png')"/>
    </div>
</template>

<script>
    export default {
    }
</script>

<style lang="css">
</style>

原文由 papey 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

强烈建议在从资产导入图片时使用 webpack，一般用于优化和路径目的

如果你想通过 webpack 加载它们，你可以简单地使用 :src='require('path/to/file')' 确保你使用 : 否则它不会像 Javascript 一样执行 require 语句。

在打字稿中，您可以执行几乎完全相同的操作： :src="require('@/assets/image.png')"

为什么以下通常被认为是不好的做法：

 <template>
  <div id="app">
    <img src="./assets/logo.png">
  </div>
</template>

<script>
export default {
}
</script>

<style lang="scss">
</style>

使用 Vue cli 构建时，webpack 无法确保资产文件将保持遵循相对导入的结构。这是由于 webpack 试图优化和分块出现在 assets 文件夹中的项目。如果您希望使用相对导入，您应该在 static 文件夹中执行此操作并使用： <img src="./static/logo.png">

原文由 li x 发布，翻译遵循 CC BY-SA 4.0 许可协议