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

Posted 2023-02-16

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

【英文标题】：How to import and use image in a Vue single file component?

【发布时间】：2017-12-20 08:54:27

【问题描述】：

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

<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 " 等。但似乎没有任何效果。我也找不到任何例子。有什么帮助吗？

【问题讨论】：

如果是静态svg图片就用src='images/zapier_logo.svg'

您的控制台是否出现错误？

【参考方案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> 

【讨论】：

如果您希望将其包含在数据中，您可能还想包含 image: require('path/to/file')。

我认为我们还应该提到在 url 之前使用波浪号（~）。如果您不使用require。 src="~src/assets/img/me.png"

:src="require('@/assets/image.png')" 为我工作。

如何在 background-image:url('') 中使用？

图像作为模块的方式是我唯一可行的方式。

【参考方案2】：

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

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

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

【讨论】：

那么<img :src="require('@/assets/image.png')">?这对我不起作用。它抱怨找不到依赖项。

@Pithikos 出现此错误的原因有很多，您能否扩展更多内容或发布问题，我可以尝试调试。

url-loader 允许您有条件地将文件内联为 base-64 数据 URL（如果它们小于给定阈值）。这可以减少对琐碎文件的 HTTP 请求量。如果文件大于阈值，它会自动回退到文件加载器。 - 如果你不使用 webpack 来加载你的图像，你将不会获得这个好处或这里提到的其他好处：vue-loader.vuejs.org/guide/asset-url.html#transform-rules@akauppi

@akauppi 我非常怀疑你使用的是 vue.js 而不是 webpack，vue 的原生开发服务器是 webpack，构建器也是 webpack，你还问它是否仍然相关，根据文档仍然非常相关，因此可以回答您的评论。下次不想回答就别问了。

【参考方案3】：

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

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

【讨论】：

虽然这确实有效，但在这种情况下你并没有利用 webpack。

我没有使用 Typescript，但我必须使用您的解决方案。谢谢。

【参考方案4】：

这些在 JavaScript 和 TypeScript 中都适用于我

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

或

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

【讨论】：

虽然这确实有效，但在这种情况下你并没有利用 webpack。此外，在实践中不鼓励使用 src="./assets/images/logo.png"，因为与静态不同，您无法确保在构建时如何捆绑资产目录中的项目。

【参考方案5】：

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

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

虽然这是 Nuxt，但它应该与 Vue CLI 相同。

【参考方案6】：

我在quasar 中遇到问题，这是一个基于vue 的移动框架，标题语法~assets/cover.jpg 在普通组件中有效，但在我的动态定义组件中无效，由

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

终于完成了这项工作：

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

<q-img class="coverImg" :src="coverUri" : 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.

【参考方案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" 似乎都不起作用。

【参考方案8】：

..当一切都失败时，就像在我的情况下，我试图导入一个占位符，我在多页 Vuelectro-app 中使用了几次 - 但这次在一个子子组件中，没有一个建议的解决方案起作用（因为他们通常会）..

<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(...)

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

【参考方案9】：

我也面临同样的问题来显示资产图像。最后，这两种方式对我来说都很好-

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

和

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