图片要分两种来看,一种是本地的图片,另一种是服务器上的图片。小程序中如何引入这两种图片呢?
目录
1、通过cover-view和cover-image来引入图片
1、通过cover-view和cover-image来引入服务器上的图片
4、通过wxss中使用 background的url 方式引入服务器上的图片
一、如何引用本地图片
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>
// 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.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文件的方法 请戳这里: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.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>
图片能够加载出来,为防止侵权,故处理了一下: