如何在Vue单文件组件中导入和使用图像? [英] How to import and use image in a Vue single file component?
问题描述
我认为这应该很简单，但是我在如何在 Vue 单文件组件中导入和使用图像时遇到了一些麻烦.有人可以帮助我如何做到这一点吗?这是我的代码片段:
<img src="zapierLogo";/></模板><脚本>从images/zapier_logo.svg"导入 zapierLogo导出默认{}<style lang="css"></风格>我尝试过使用 :src、src="{{ zapierLogo }}" 等.但似乎没有任何效果.我也找不到任何例子.有什么帮助吗?
就这么简单:
<div id="应用程序"><img src=./assets/logo.png"></模板><脚本>导出默认{}<style lang="css"></风格>
取自 vue cli 生成的项目.
如果你想使用你的图像作为模块，不要忘记将数据绑定到你的 Vuejs 组件:
<div id="应用程序"></模板><脚本>从./assets/logo.png"导入图片；导出默认{数据:函数(){返回 {图像:图像}}}<style lang="css"></风格>
还有一个更短的版本:
<div id="应用程序"><img :src=require('./assets/logo.png')"/></模板><脚本>导出默认{}<style lang="css"></风格>
I think this should be simple, but I am facing some trouble on how to import and use an image in Vue single file component. Can someone help me how to do this? Here is my code snippet:
<template lang="html">
<img src="zapierLogo" />
</template>
<script>
import zapierLogo from 'images/zapier_logo.svg'
export default {
}
</script>
<style lang="css">
</style>
I have tried using :src, src="{{ zapierLogo }}", etc. But nothing seems to work. I was not able to find any example too. Any help?
As simple as:
<template>
<div id="app">
<img src="./assets/logo.png">
</div>
</template>
<script>
export default {
}
</script>
<style lang="css">
</style>
Taken from the project generated by vue cli.
If you want to use your image as a module, do not forget to bind data to your Vuejs component:
<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>
And a shorter version:
<template>
<div id="app">
<img :src="require('./assets/logo.png')"/>
</div>
</template>
<script>
export default {
}
</script>
<style lang="css">
</style>
这篇关于如何在Vue单文件组件中导入和使用图像?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
