vue中使用图片的几种方式

1. src直接引用图片路径，注意assets在使用npm build编译会编译此文件。而public文件中的静态文件则直接引用，没有编译。

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

2. 使用导入过的图片资源，导入过后，必须挂载到当前组件上才能在视图中使用。

import logo from "../assets/logo.png";

export default {

data() {

return {

logo: logo,

};

},

};

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

3. 使用require()导入资源

第一种情况：

export default {

data() {

        return {

        logo2: require("../assets/logo.png"),

                     };

           },

};

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

相当于省略一步在数据内直接导入

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

第二种情况：

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

直接在img标签中使用require