Vue引入静态图片的两种方式

1.require形式引入

<template>
  <div style="margin:100px">
    <div>
      <img :src="cat"         // 图片src
           alt="猫咪">
    </div>
  </div>
</template>
<script>
export default {
    
    
  data () {
    
    
    return {
    
    
      cat: require('../assets/images/cat.jpg'),   // require转换一下图片地址
    }
  }
}
</script>

2.import形式引入

• import引入图片
• data中注册一下引入的图片名称
• 模板中直接引用名称

<template>
  <div style="margin:100px">
    <div>
      <img :src="cute"                  // img地址
           alt="小可爱">
    </div>
  </div>
</template>
<script>
import cute from '../assets/images/cute.jpg'   // import引入
export default {
    
    
  data () {
    
    
    return {
    
    
      cute             // data中注册图片
    }
  }
}
</script>

图片存放及组件目录