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

搬运地址：https://blog.csdn.net/weixin_42164004/article/details/1086642221.require形式引入<template><div style="margin:100px"><div><img :src="cat"// 图片srcalt="猫咪"></div></div&g

美丽先生

2885人浏览 · 2021-11-30 11:28:23

美丽先生 · 2021-11-30 11:28:23 发布

搬运地址：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>