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

vue.js Vue.js

小卤蛋宝儿

2020-03-11

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

<template lang="html">
  <img src="zapierLogo" />
</template>

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

export default {
}
</script>

<style lang="css">
</style>

我尝试使用:srcsrc="{{ zapierLogo }}"等,但似乎没有任何效果。也找不到任何例子。有什么帮助吗?

第673篇《如何在Vue单个文件组件中导入和使用图像?》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

2个回答
GilPro 2020.03.11

这些都对我有用,在JavaScript和TypeScript中

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

要么

 <img src="./assets/images/logo.png" alt="">
飞云乐 2020.03.11

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

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

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android