Vue如何在data中正确引入图片路径

方法一：将图片资源放入项目 /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>