Vue image introduction does not display the problem

Three ways to introduce vue pictures

Pictures are placed in the assets directory and the static directory

1. Directly fixed import in template

<img src="../assets/logo.png">

2. Put the picture in the static directory and import it directly through data

// template
<img v-bind:src=imgSrc>
// srcipt
export default {
  data () {
    return {
      imgSrc: '../static/launch.png'
    };
  }
};

3. If it is placed in another directory and imported directly through data, it needs to be imported as follows

require('../assets/launch.png')orimport logo from '../assets/logo.png'

// template
<img v-bind:src=imgSrc>
// srcipt
export default {
  data () {
    return {
      imgSrc: require('../assets/launch.png')
    };
  }
};

import logo from '../assets/logo.png
// template
<img v-bind:src=imgSrc>
// srcipt
export default {
  data () {
    return {
      imgSrc: logo
    };
  }
};