vue引入图片的方式

是浅笑耶

于 2022-01-05 16:37:36 发布

阅读量1.5k

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_45079530/article/details/122326490

版权

1.import方式导入（我是根据相对路径导入）

import img from '../../../assets/img/img.png'

2.在数据里边定义该图片（vue3中使用setup，vue2在data里定义直接return出去）

2.1import方式导入的定义方法（以vue3为例）

 setup() {
    const state = reactive({
      img4: img4,
    })
    return {
      ...toRefs(state),
    }
  },

2.2require方式直接在定义里边导入（以vue2为例）

data() {
    return {
        img: require("../../../assets/img/img.png")
    }
}

3.在模板内使用

<template>
  <img class="img" :src="img" alt="" />
</template>

关注