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

Answer 2

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

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

在打字稿中，您可以执行几乎完全相同的操作：: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">

Answer 3

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

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

Answer 4

这些都适用于 JavaScript 和 TypeScript

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

或

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

Answer 5

你也可以像这样使用root快捷方式

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

虽然是Nuxt，但应该和Vue CLI一样。

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" 似乎都不起作用。

Answer 8

..当其他一切都失败时，就像我试图导入一个占位符一样，我在多页 Vueelectro-app 中使用了几次 - 但这次在一个子子组件中，其中 none建议的解决方案有效（正如他们通常所做的那样）..

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

<script>        
    export default {
        data() { return {image: null, ...} },
        methods: {
          solveImage(){
            const path = require('path')
            return path.join(process.cwd(), '/src/assets/img/me.jpg')
          },
          ...
         },
         mounted: {
           this.image = this.solveImage()
           ...
         }
    }
</script>

..应该这样做。

如果它在 created-lifecycle-hook 中工作得更好，或者您更愿意在全局范围内要求路径并调用

this.image = path.join(...)

在其中一个钩子中 - 你应该自己测试一下。

Answer 9

我在显示资产图片时也遇到了同样的问题。最后这两种方式对我来说很好-

<img src="@/assets/img/bg1.png" />

和

<img :src="require('@/assets/img/bg1.png')" />

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

How to import and use image in a Vue single file component?

vue.js

vuejs2

webpacker

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