小程序 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和cover-image来引入图片：
        
            
            
        
        
            
            
        
    

// 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


        通过image标签引入图片
        
        
    

效果：

 

---

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

 

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）

建议：

1. 在引用服务器上的图片之前，可以新建一个公共的scss文件，里面存放公共服务器的地址；
2. 引用服务器上的图片时，先引入该公共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


    通过在wxss中使用：background的url方式引入图片：
    

// index.wxss

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

效果：

 

三、base64格式图片怎么展示？

如果遇到后端给的图片是base64格式的，怎么展示呢？

• 把上面方法中的src属性的值，换成  base64格式的图片 就好了。

案例

// index.wxml

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