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

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

Answer 3

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

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

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

Answer 4

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

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

Answer 5

这两个都可以在JavaScript和TypeScript中使用

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

或

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

Answer 6

我在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.

Answer 7

对于 Vue 3，我不得不使用

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

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


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

src="@/assets/burger.jpg" 和 src="../assets/burger.jpg" 似乎都不起作用。

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

7 个答案: