vue项目使用图片

第一种方法：html 中 标签直接引用 。

<img src="../assets/logo.png" alt=""/>

assets 在使用npm build 编译会编译此文件。 而public文件中的静态文件则是直接引用，没有编译

第二种方法：使用import 导入

在js中使用

首先先使用import 导入图片资源 ，导入后必须要挂在到组件上才能使用

//导入
import logo from '../assets/logo.png'
export default {
    data() {
       return {
           //挂在到组件上
           imgLogo: logo 
       }
    }
}

挂载完数据以后，可以在 html 使用 imgLogo

<img :src="imgLogo" alt="" />

第三种方法： 使用require()导入资源

两种写法：

1、

export default {
    data() {
        return {
            imgLogo: require('../assets/logo.png')
        }
    }
}

使用：

<img :src="imgLogo" alt="" />

2、

<img :src="require('../assets/logo.png')" alt="" />