如何在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 }}"等等,但似乎没有用.也找不到任何例子.有帮助吗？

Answer 1

很简单:

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

<script>
export default {
}
</script>

<style lang="scss">
</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="scss">
</style> 

还有一个较短的版本:

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

<script>
export default {
}
</script>

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

Answer 2

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

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

Answer 3

如果您希望通过webpack加载它们,您只需使用:src='require('path/to/file')'确保您使用,:否则它将不会以Javascript的形式执行require语句.