使用Vue如何引入静态图片

" "

需求描述

在vue中引入图片。

‍

解决方法

在vue中引入图片有两种方式，使用require或者import。

若是需要动态切换则推荐使用require，若只是引入图片必入作为背景不再改变，则推荐使用import。

require

<template>
  <div style="margin:100px">
    <div>
      <img :src="cat" alt="猫咪">
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      cat: require('@/assets/images/cat.jpg'),
    }
  }
}
</script>

‍

import

1. import引入图片
2. data中注册一下引入的图片名称
3. 模板中直接引用名称

<template>
  <div style="margin:100px">
    <div>
      <img :src="cute" alt="小可爱">
    </div>
  </div>
</template>

<script>
import cute from '../assets/images/cute.jpg'
export default {
  data () {
    return {
      cute
    }
  }
}
</script>

‍