vue图片展示的多个写法

在vue-cli脚手架里面开发的时候，如果你用的图片的绝对路径，直接使用即可。比如： <img src="https://n.sinaimg.cn/spider2020116/14/w580h234/20200116/cc86-inhcyca2613430.png">。

但是如果图片是存在你的项目里面，比如有个文件夹img，里面有图片 aa.jpg,这个时候引入图片的时候，如果是直接放在img标签的src里面，是可以用的，比如：<img src="./img/aa.jpg">

但是如果路径是写在data属性里面的：

export default {  
    data: function() {    
        return {      
            imgurl: "./img/aa.jpg"          
        };  
    }
}

这个时候由于webpack帮你编译了，路径会出现问题。

解决方案一：在路径前面加上 require()即可，但是要注意，如果路径是全部写变量里面，引入也会报错。

let url="./img/aa.jpg";
let url2="aa.jpg";
export default {  
    data: function() {    
        return {      
            imgurl: require("./img/aa.jpg"),//ok 可以拿到图片      
            imgurl2: require(url),//错误，写变量会报错，自己拼接路径即可
            imgurl3: require('./img/'+ url2 )//这种写法也ok
        };  
        
    }
}

解决方案二：把图片放在public目录下（用vue-cli创建项目的时候默认会有个目录叫public），作为静态资源。直接引用即可，写上绝对路径。

假设: public/img/bb.jpg,按下方路径书写即可调用。

<img src="/img/bb.jpg" alt />