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>

图片存放及组件目录

在这里插入图片描述

Logo

前往低代码交流专区

更多推荐