小程序 image相关

小程序 image相关

图片要分两种来看，一种是本地的图片，另一种是服务器上的图片。小程序中如何引入这两种图片呢？

目录

一、如何引用本地图片

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-top	number/string		否	设置顶部滚动偏移量，仅在设置了 overflow-y: scroll 成为滚动元素后生效

（2）、cover-image

属性	类型	默认值	必填	说明
src	string		否	图标路径，支持临时路径、网络地址（1.6.0起支持）、云文件ID（2.2.3起支持）。暂不支持base64格式。
bindload	eventhandle		否	图片加载成功时触发
binderror	eventhandle		否	图片加载失败时触发

（3）、案例

// index.wxml<cover-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>

// ver_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.wxml<view 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文件的方法 请戳这里：）

建议：

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

案例

// common.scss$img-url:'';

// 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(.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('.jpeg')
}

注意：

• 此方法不能引入 本地图片。

失败的案例：

// index.wxml<view>通过在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.wxml<image 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/C1hNUCBEYXRhWE1QPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS41LWMwMTQgNzkuMTUxNDgxLCAyMDEzLzAzLzEzLTEyOjA5OjE1ICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1wTU06T3JpZ2luYWxEb2N1bWVudElEPSJ4bXAuZGlkOkUzNUVCMkE5QURCQUUxMTFBNTBEQkM2Mjc3MUYzQkZGIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjYxNDBFOURFRjhDMjExRTI5QTkyQ0YxNzQyNkU1NDc1IiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjYxNDBFOURERjhDMjExRTI5QTkyQ0YxNzQyNkU1NDc1IiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDUzUgV2luZG93cyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjc1NkI2RTlCMDBDMUUxMTFBOTVBQjc2RUMyMDBBNjg2IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkUzNUVCMkE5QURCQUUxMTFBNTBEQkM2Mjc3MUYzQkZGIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+Af/+/fz7+vn49/b19PPy8fDv7u3s6+rp6Ofm5eTj4uHg397d3Nva2djX1tXU09LR0M/OzczLysnIx8bFxMPCwcC/vr28u7q5uLe2tbSzsrGwr66trKuqqainpqWko6KhoJ+enZybmpmYl5aVlJOSkZCPjo2Mi4qJiIeGhYSDgoGAf359fHt6eXh3dnV0c3JxcG9ubWxramloZ2ZlZGNiYWBfXl1cW1pZWFdWVVRTUlFQT05NTEtKSUhHRkVEQ0JBQD8+PTw7Ojk4NzY1NDMyMTAvLi0sKyopKCcmJSQjIiEgHx4dHBsaGRgXFhUUExIREA8ODQwLCgkIBwYFBAMCAQAAIfkEAQAAoQAsAAAAAJEAMgAACP8AQwkcSLCgwYMIEypcyLChw4cQI0qcSLGixYsYM2rcyLGjx48gQ4ocSbKkyZMoU2LE4GAFikATJmwgk+WEAwwqc+q80aaBBlBAgwoFNcODiys6k46s8AjM0KdPeWCxoLQqRyI7oGp9SuKB1a8Wo3TZSlaojhdg0z5UA6KsW6E+WKidm1DB27tAHVVIGWAA3Ycw8AoWkRIBKAYFFzjIOQBBAqEKEvqpIViwC5QAgBIMoFklgQABQg14DMrAwR5hKgvWIIjiggMQFwQlSKBzKAIICKQUELTAQRGqK3eYKBtUaIcHgMImCGp5qAKgEuh2SMBBgOkJGSDwa7CB8oNLMr//VeEmh54XCCTgPRRxgHgDxxfaBQVAQEFQDQa6N4BdoQADQi2g0AD02SfQceIhZhAnbx3AxwUFETCHIWTZwMUmZURkFwHiCahQcaB4yJwCDihgGkMBMGCieEJxhxCA9RWQGQCGAdWfQEIo4VYjVST0RghPRZDACpC0MJEBCZAGioEICSCebwYJhYBCuLkV30HQCXUAAKSdWFAAEJSlyI0G3WAHUBDwAMIDVE3EQAHJBZVfQgTEOSdBMgYVmX8sQgUAlAk5oKdfA2QJKEE5lAWAJA1NQQIHQaRgEWdCAaAAmQR5BxQALgpUQI1XJtRYn/QpsACmXwbFAGiFArWYQVSU/0XBQ3JhxBsoCoAm0GcIZRlUqKEwEFRuDgVQgKZeovhUAVkySdAWZEXgVUoOANCfYXcSRGqoIAJ1KEO3AvCQsEElUAABWSJUCVkzmKASAnsOFKeIm5ELW20CESilRHE6q1CNmuk2H0JskCWBpCgR6G9QzhU032IMJCCQpkApGBFp9CoEIMO4boxQE2RlgMhJxyogsX7d4ppqaQIdoCB9DCQnkAAnN0QpKJ0q9FQDAiRXc0HqbSUDEidtbLGgT8V7W5ymCcqdA/bZFYCT3/77nUNKgqLbrQcoPVBWZB1xknguxjnUlRTD1sDPM0eXWc50DvvQxkAZYIDZoBz0Q1kSyP9RUnENO3C3UMmGMhSBFhMU55QO+brAAA4UsKpBhTZgAKlDZSxQGm5x0BAQfeBxx0R1AuV1KABzWlDW3sEdynwKClB1vgVk/dSfzD2FNyjbIRTDT2WdsJAnYYKyBiViQPgQxa8OxGFQ/s6sJNszMx2Kk4w7v4DtZMUL4gGSiwe+6wQV8RYNQxyUyAhQZdBBHXkwBLDWBdFdmgGas5i4QNU2B1QCmRHRABSAubIkSwC6yhLPCkI+TETgLR/4xB4eIABGAGIElihLJ6zgBCNR7jHiYdv8giIugtwqOp2i25S6hRh0FdAtp0Od3GhzgOwV5BKCqYEOHoiXCbSJIO75U23seGdCPzVPIPOx1pceE68AhJBmZEmAARTArBUFBW6+UiJBamTDgQhABsG5ixn+0KTpVKwgCARNihTgr+cZp0kR0s4CFmC3OjZAcn0R1dQOUqP6MHCGBglMGN2SiYbYjXwKMdRX6rRAgzggSQnRApAGuRUjnEEknGnYXx6CAzhQEioJgAJJFhC9TTYkBkn4pFA0gRNTmhIHKFAlKDzgLlfa8guRGKQUJrEXW/qSDoSwQWWeQAMm+PKYAykEB1TwlgwsYhDIjOZA4jAGCmygBGhA0wdKsAEKeEF50gynOMdJznKa85zoTKc611mQgAAAOw=='mode="aspectFit" lazy-load="false" binderror="imgLoadSuccessBase64" bindload="imgLoadFailBase64"
></image>

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