方法一：将图片资源放入项目 /static 目录下，使用绝对或相对路径引用即可

// 文件结构
|-- src
|   |-- components
|   |   |-- banner.vue
|-- static
|   |-- images
|   |   |-- pic.jpg

<template><div id="banner"><img :src="img"></div>
</template><script>
export default {data () {name: 'banner'return : {// img: '../../static/images/pic.jpg'  // 相对路径img: '/static/images/pic.jpg'          // 绝对路径}}
}
</script>

方法二：在 <script> 脚本中，使用 import 引入文件

// 文件结构
|-- src
|   |-- assets
|   |   |-- pic.jpg
|   |-- components
|   |   |-- banner.vue

<template><div id="banner"><img :src="img"></div>
</template><script>
import banner1 from '../assets/pic.jpg'export default {data () {name: 'banner'return : {img: banner1}}
}
</script>