更新记录

1.1.29（2026-02-06） 下载此版本

修改svg 换色时的说明文档

1.1.28（2026-02-04） 下载此版本

上传示例项目

1.1.27（2026-02-04） 下载此版本

删除打印信息

平台兼容性

uni-app(3.7.7)

z-image

可以直接下载示例项目查看使用方法

一. 新增svg更换颜色的功能。适用与APP和H5

由于在app端currentColor无法使用，所以促生出的功能

使用方法

1. 首先更换掉svg源码中的颜色 换成你自己想要设置的变量 比如我将一个svg源码的颜色换成了 "color1"

   <path
   d="M21.95283128659668,20.001166157348635L13.70319938659668,11.751549457348633L16.06023238659668,9.394533157348633L26.66683138659668,20.001166157348635L16.06023238659668,30.607664157348633L13.70319938659668,28.250664157348634L21.95283128659668,20.001166157348635Z"
   fill="color1" fill-opacity="1" />

2. 可以直接更换颜色

   <!-- 原图 -->
   <image class="logo" src="/static/gouwu.svg" mode=""></image>
   
   <!-- 修改颜色，这里原本的颜色时'#FF743E' 我直接修改成'#f00' -->
   <z-image class="logo" :svgColorMap="{'#FF743E':'#f00'}" src="/static/gouwu.svg" mode="aspectFit"></z-image>
   <z-image class="logo" :svgColorMap="{'#FF743E':'#f0f'}" src="/static/gouwu.svg" mode="aspectFit"></z-image>

3. 在使用的时候在 添加属性 svgColorMap 并设置对应的变量以及颜色，就完成了

   <z-image :svgColorMap="{color1:'#595959'}" src="/static/svg/arrow-right.svg" mode="aspectFit" class="icon"></z-image>

二. 适用于nvue和vue的图片缓存组件 同时也有占位图功能

因为组件中现在的占位图是我随便放的一张图片，所以希望开发者们自己去替换，有什么问题加评论区的qq和我联系，或者直接发评论，我会收到提醒

此处的 src 属性，传入的是图片地址，可以直接使用 z-image 替换 image直接换成下面这样

    <z-image  :src="'http://bpic.588ku.com/element_pic/01/37/92/40573c69065b76e.jpg'"  ></z-image>  

Occupants 属性 接收的是字符串类型的数据，传入一张本地的 你想要作为占位图的图片地址，网络地址无效，该组件不会缓存占位图

例如

    <z-image :Occupants="/static/logo.png" :src="'http://bpic.588ku.com/element_pic/01/37/92/40573c69065b76e.jpg'"  ></z-image>

或者你可以直接进入 项目的 uni_modules 目录 找到 z-image-->components-->z-image-->z-image.vue 文件， 将其中props中的Occupants值更换,然后将你需要的图片也放到此目录下 default: require('./lazy.png') 中修改图片的名字

    Occupants: {
            type: String,
            default: require('./lazy.png')
            },