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

我认为这应该很简单，但是我在如何导入和使用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 }}"等。但是似乎没有任何作用。我也找不到任何例子。有什么帮助吗？

就像：

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

强烈建议从资产导入图片时使用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">

我最近遇到了这个问题，并且正在使用Typescript。如果您像我一样使用Typescript，则需要像这样导入资产：

<img src="@/assets/images/logo.png" alt="">

您也可以像这样使用根快捷方式

  <template>
   <div class="container">
    <h1>Recipes</h1>
      <img src="@/assets/burger.jpg" />
   </div>
  </template>

尽管这是Nuxt，但与Vue CLI应当相同。

这些都对我有用，在JavaScript和TypeScript中

<img src="@/assets/images/logo.png" alt=""> 

要么

 <img src="./assets/images/logo.png" alt="">

我遇到一个问题，quasar该问题基于移动框架vue，tidle语法~assets/cover.jpg在普通组件中起作用，但在我的动态定义组件中却不起作用，该组件由

let c=Vue.component('compName',{...})

终于这项工作了：

    computed: {
      coverUri() {
        return require('../assets/cover.jpg');
      }
    }

<q-img class="coverImg" :src="coverUri" :height="uiBook.coverHeight" spinner-color="white"/>

根据https://quasar.dev/quasar-cli/handling-assets上的解释

In *.vue components, all your templates and CSS are parsed by vue-html-loader and css-loader to look for asset URLs. For example, in <img src="./logo.png"> and background: url(./logo.png), "./logo.png" is a relative asset path and will be resolved by Webpack as a module dependency.