方法一：將圖片資源放入項目 /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>