图片要分两种来看，一种是本地的图片，另一种是服务器上的图片。小程序中如何引入这两种图片呢？目录一、如何引用本地图片1、通过cover-view和cover-image来引入图片2、通过image标签引入图片二、如何引入自己服务器上的图片1、通过cover-view和cover-image来引入服务器上的图片2、通过image标签引入服务器上的图片3、将图片上传至服务器，然后动态引入服务器上的图片4、通过wxss中使用  background的url  方式引入服务器上的图片三、base64格式图片怎么展示？ 

一、如何引用本地图片 

1、通过cover-view和cover-image来引入图片（1）、cover-view可覆盖的原生组件包括 map、video、canvas、camera、live-player、live-pusher只支持嵌套 cover-view、cover-image，可在 cover-view 中使用 button。组件属性的长度单位默认为px，2.4.0起支持传入单位(rpx/px)。

属性 类型 默认值 必填 说明

scroll-topnumber/string 否设置顶部滚动偏移量，仅在设置了 overflow-y: scroll 成为滚动元素后生效（2）、cover-image

属性 类型 默认值 必填 说明

srcstring 否图标路径，支持临时路径、网络地址（1.6.0起支持）、云文件ID（2.2.3起支持）。暂不支持base64格式。bindloadeventhandle 否图片加载成功时触发binderroreventhandle 否图片加载失败时触发（3）、案例// index.wxmlcover-view class="cover_wrap" scroll-top="0"        通过cover-view和cover-image来引入图片：        cover-view class="cover_box cover_box_01" scroll-top="0"            cover-image class="cover_img cover_img_001" src="../../../aStatic/image/kakaxi.jpg"                 bindload="imgLoadSuccess" binderror="imgLoadFail"            /cover-image            cover-image class="cover_img cover_img_002" src="../../../aStatic/image/mingren.jpg"                 bindload="imgLoadSuccess" binderror="imgLoadFail"            /cover-image        /cover-view        cover-view class="cover_box cover_box_02" scroll-top="0"            cover-image class="cover_img cover_img_003" src="../../../aStatic/image/zilaiye.jpg"                 bindload="imgLoadSuccess" binderror="imgLoadFail"            /cover-image            cover-image class="cover_img cover_img_004" src="../../../aStatic/image/luoxuanwan.jpg"                 bindload="imgLoadSuccess" binderror="imgLoadFail"            /cover-image        /cover-view    /cover-view

// index.wxss.cover_box{    width: 666rpx;    height: 500rpx;    border: 2rpx solid rgb(113, 11, 153);}.cover_box_02{    display: flex;    flex-direction: row;    justify-content: space-between;}.cover_img{    width: 200rpx;    height: 200rpx;    border-radius: 5%;}

效果：

2、通过image标签引入图片// index.wxmlview hover-class="none" hover-stop-propagation="false"        通过image标签引入图片        !-- mode="aspectFit|aspectFill|widthFix" --        image class="image" src="../../../aStatic/image/luoxuanwan.jpg" mode="aspectFit" lazy-load="false"             binderror="imgLoadFail" bindload="imgLoadSuccess"        /image    /view

效果： 

---

二、如何引入自己服务器上的图片 

1、通过cover-view和cover-image来引入服务器上的图片把src的路径换做服务器的地址就好，不赘述。

2、通过image标签引入服务器上的图片把src的路径换做服务器的地址就好，不赘述。

3、将图片上传至服务器，然后动态引入服务器上的图片考虑到图片所占资源存储较大，一般小程序项目会选择 将图片上传至服务器，然后动态引入服务器上的图片。由于平时习惯了用scss编写样式，所以，可以先安装scss插件，然后用scss编写样式，这样就可以在scss文件里结合 background的url 方式引入图片了。编写好之后，删掉原有的wxss文件，然后将scss文件转译生成wxss文件。（将scss文件转译生成wxss文件的方法 请戳这里：https://blog.csdn.net/mChales_Liu/article/details/99292658）建议：

在引用服务器上的图片之前，可以新建一个公共的scss文件，里面存放公共服务器的地址；引用服务器上的图片时，先引入该公共scss文件，然后用 “公共变量+服务器上图片的存放路径” 的方式在background的url里引入图片。

案例// common.scss$img-url:'https://wxbtest.XXXXXXX.com/XXX/img';

// index.scss@charset "UTF-8";@import "../../../common.scss";#box-personal{  background: url(#{$img-url}/my-header.jpg?t=20181019) no-repeat top center;  background-size: 100% 100%;}

经ruby转译后生成的wxss文件// index.wxss#box-personal {  background: url(https://wxbtest.XXXXXX.com/XXX/img/my-header.jpg?t=20181019) no-repeat top center;  background-size: 100% 100%; }

4、通过wxss中使用  background的url  方式引入服务器上的图片案例：// index.wxss.back_img{    width: 200rpx;    height: 200rpx;    background: url('http://img4q.duitang.com/uploads/item/201505/01/20150501125423_taQGn.jpeg')}

注意：此方法不能引入 本地图片。失败的案例：// index.wxmlview    通过在wxss中使用：background的url方式引入图片：    view class="back_img"/view/view

// index.wxss.back_img{    width: 200rpx;    height: 200rpx;    background: url('../../../aStatic/image/kakaxi.jpg')}

效果： 

三、base64格式图片怎么展示？如果遇到后端给的图片是base64格式的，怎么展示呢？把上面方法中的src属性的值，换成  base64格式的图片 就好了。案例// index.wxmlimage src='data:image/jpg;base64,R0lGODlhkQAyAPehAO/2+0CRzzCIyyB+xxB1w3+137/a79/t95/I58/j84++42Cj13Ct26/R61Ca0z6Qz/7+//v9/trq9sLc8JHA4wVvwAdwwRZ5xR59x+Pv+Ofx+cHb75fD5Z3H5rLT7PL4/Iu84rHS64q84qDI58ff8dzr9hl6xYK34KrO6gpywuDt94O44AZvwQNuwFug1naw3Xqy3hh6xfb6/ejy+avP6v3+/vn8/QtywhJ2xH203vX5/MDb79Tm9BV4xJbC5Y6+436130WU0Axzwi2GyjeMzaHJ577a73Sv3C+Hy8Pc8Njp9SOAyDGIy+Tv+EKS0Pz9/hp7xmqp2vD2+yKAyLPT7B19xpC/4w1zwmio2anN6QRuwNXn9Mrg8vH3+1Oc1G+s29Hk893r9lmf1VGb07zY7iaCyfr8/ghxwfP4/FKb1AJtwOvz+urz+lWd1KbM6Rd5xcbe8RR4xBF2w1+j1yyFykyY0rjW7Rx8xmOl2A50w22r2mGk12mp2bnX7UuX0j+Qz1yh1r3Z7h9+xzuOzqTL6DaLzdfo9UOT0BN3xCeCycTd8JvF5jyPzrvY7p7H52Kk2DiMzez0+iuFynix3ajN6eLu+O31+rDR6z2Pzoi64c3i8oC234W54Nvq9nGt26fM6f///wBsvwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH/C1hNUCBEYXRhWE1QPD94cGFja2V开通圆头鞋小程序电话:4006-838-5300IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS41LWMwMTQgNzkuMTUxNDgxLCAyMDEzLzAzLzEzLTEyOjA5OjE1ICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1wTU06T3JpZ2luYWxEb2N1bWVudElEPSJ4bXAuZGlkOkUzNUVCMkE5QURCQUUxMTFBNTBEQkM2Mjc3MUYzQkZGIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjYxNDBFOURFRjhDMjExRTI5QTkyQ0YxNzQyNkU1NDc1IiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjYxNDBFOURERjhDMjExRTI5QTkyQ0YxNzQyNkU1NDc1IiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rv开通绷带纱布小程序电话:4006-838-530c2hvcCBDUzUgV2luZG93cyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjc1NkI2RTlCMDBDMUUxMTFBOTVBQjc2RUMyMDBBNjg2IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkUzNUVCMkE5QURCQUUxMTFBNTBEQkM2Mjc3MUYzQkZGIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+Af/+/fz7+vn49/b19PPy8fDv7u3s6+rp6Ofm5eTj4uHg397d3Nva2djX1tXU09LR0M/OzczLysnIx8bFxMPCwcC/vr28u7q5uLe2tbSzsrGwr66trKuqqainpqWko6KhoJ+enZybmpmYl5aVlJOSkZCPjo2Mi4qJiIeGhYSDgoGAf359fHt6eXh3dnV0c3JxcG9ubWxramloZ2ZlZGNiYWBfXl1cW1pZWFdWVVRTUlFQT05NTEtKSUhHRkVEQ0JBQD8+PTw7Ojk4NzY1NDMyMTAvLi0sKyopKCcmJSQjIiEgHx4dHBsaGRgXFhUUExIREA8ODQwLCgkIBwYFBAMCAQAAIfkEAQAAoQAsAAAAAJEAMgAACP8AQwkcSLCgwYMIEypcyLChw4cQI0qcSLGixYsYM2rcyLGjx48gQ4ocSbKkyZMoU2LE4GAFikATJmwgk+WEAwwqc+q80aaBBlBAgwoFNcODiys6k46s8AjM0KdPeWCxoLQqRyI7oGp9SuKB1a8Wo3TZSlaojhdg0z5UA6KsW6E+WKidm1DB27tAHVVIGWAA3Ycw8AoWkRIBKAYFFzjIOQBBAqEKEvqpIViwC5QAgBIMoFklgQABQg14DMrAwR5hKgvWIIjiggMQFwQlSKBzKAIICKQUELTAQRGqK3eYKBtUaIcHgMImCGp5qAKgEuh2SMBBgOkJGSDwa7CB8oNLMr//VeEmh54XCCTgPRRxgHgDxxfaBQVAQEFQDQa6N4BdoQADQi2g0AD02SfQceIhZhAnbx3AxwUFETCHIWTZwMUmZURkFwHiCahQcaB4yJwCDihgGkMBMGCieEJxhxCA9RWQGQCGAdWfQEIo4VYjVST0RghPRZDACpC0MJEBCZAGioEICSCebwYJhYBCuLkV30HQCXUAAKSdWFAAEJSlyI0G3WAHUBDwAMIDVE3EQAHJBZVfQgTEOSdBMgYVmX8sQgUAlAk5oKdfA2QJKEE5lAWAJA1NQQIHQaRgEWdCAaAAmQR5BxQALgpUQI1XJtRYn/QpsACmXwbFAGiFArWYQVSU/0XBQ3JhxBsoCoAm0GcIZRlUqKEwEFRuDgVQgKZeovhUAVkySdAWZEXgVUoOANCfYXcSRGqoIAJ1KEO3AvCQsEElUAABWSJUCVkzmKASAnsOFKeIm5ELW20CESilRHE6q1CNmuk2H0JskCWBpCgR6G9QzhU032IMJCCQpkApGBFp9CoEIMO4boxQE2RlgMhJxyogsX7d4ppqaQIdoCB9DCQnkAAnN0QpKJ0q9FQDAiRXc0HqbSUDEidtbLGgT8V7W5ymCcqdA/bZFYCT3/77nUNKgqLbrQcoPVBWZB1xknguxjnUlRTD1sDPM0eXWc50DvvQxkAZYIDZoBz开通二维码贴纸小程序电话:4006-838-5300Q1kSyP9RUnENO3C3UMmGMhSBFhMU55QO+brAAA4UsKpBhTZgAKlDZSxQGm5x0BAQfeBxx0R1AuV1KABzWlDW3sEdynwKClB1vgVk/dSfzD2FNyjbIRTDT2WdsJAnYYKyBiViQPgQxa8OxGFQ/s6sJNszMx2Kk4w7v4DtZMUL4gGSiwe+6wQV8RYNQxyUyAhQZdBBHXkwBLDWBdFdmgGas5i4QNU2B1QCmRHRABSAubIkSwC6yhLPCkI+TETgLR/4xB4eIABGAGIElihLJ6zgBCNR7jHiYdv8giIugtwqOp2i25S6hRh0FdAtp0Od3GhzgOwV5BKCqYEOHoiXCbSJIO75U23seGdCPzVPIPOx1pceE68AhJBmZEmAARTArBUFBW6+UiJBamTDgQhABsG5ixn+0KTpVKwgCARNihTgr+cZp0kR0s4CFmC3OjZAcn0R1dQOUqP6MHCGBglMGN2SiYbYjXwKMdRX6rRAgzggSQnRApAGuRUjnEEknGnYXx6CAzhQEioJgAJJFhC9TTYkBkn4pFA0gRNTmhIHKFAlKDzgLlfa8guRGKQUJrEXW/qSDoSwQWWeQAMm+PKYAykEB1TwlgwsYhDIjOZA4jAGCmygBGhA0wdKsAEKeEF50gynOMdJznKa85zoTKc611mQgAAAOw=='        mode="aspectFit" lazy-load="false"         binderror="imgLoadSuccessBase64" bindload="imgLoadFailBase64"/image

图片能够加载出来，为防止侵权，故处理了一下：