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

搬运地址：https://blog.csdn.net/weixin_42164004/article/details/108664222

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>

3.图片存放及组件目录