Default 默认图片

图片资源

本框架共有6个默认图片，详细如下：

empty.svg：意义是表示内容为空
blank.svg：意义是空占位，当img标签src属性为空的时候，可用该图来替代，该图片在页面不会显示任何图像
avatar.svg：意义是表示默认头像
none.svg：意义是表示没有封面图片
loading.svg：意义是表示内容加载中，默认宽高是18px
loading-white.svg：意义与loading.svg一样，只是其是白色填充，适合暗黑主题

调用方法

以上六张图均存在于三个地方，images文件夹中，css中和js中，所以也有三种调用方法，尽可能满足了可能出现的使用场景。

1、普通引用。如果用户使用了images文件夹，那么使用src="images/xxx.svg"方法便可
2、css变量引用。如果是用户重写了css某些板块并且没有使用引入images文件夹，使用css变量更加方便
3、js变量引用。如果是用户重写了js某些板块并且没有使用引入images文件夹，使用js变量更加方便

第一种方法很简单，便不再赘述，下文主要讲解css变量和js变量的用法。

css变量

这六张图片以base64的格式存在css中，对应的变量是--load、--load-w、--empty、--none、--avatar、--none和--blank。在编写css中可以自由使用这些变量。

loading-white.svg和blank.svg由于无法显示效果，所以本次不做演示。

由于图片变量是以url(...)的形式存在的，所以只能在background作为背景引用。

                                    <span style="background: var(--load) no-repeat center;width:5.6rem;height:5.6rem"></span>
                                    <span style="background: var(--avatar) no-repeat center / cover;width:5.6rem;height:5.6rem"></span>
                                    <span style="background: var(--empty) no-repeat center / cover;width:5.6rem;height:5.6rem"></span>
                                    <span style="background: var(--none) no-repeat center / 200%;width:5.6rem;height:5.6rem"></span>

js变量

css中六张base64的格式的图片被axImage函数接收，该函数输出对应的六个值，分别是axImage.load、axImage.loadW、axImage.empty、axImage.none、axImage.avatar、axImage.none和axImage.blank。

css变量不能给图片src属性赋值，所以需要通过js变量给图片标签src属性赋值。在用户编写js片段，动态创建img标签的时候该js变量是很有用。

HTML JS

                                            <div id="imgBox"></div>

            let box = document.querySelector('#imgBox'),
                doms = [
                    axAddElem('img', { src: axImage.empty }),
                    axAddElem('img', { src: axImage.none }),
                    avatarDom = axAddElem('img', { src: axImage.avatar }),
                    loadDom = axAddElem('img', { src: axImage.load })
                ];
            doms.forEach(k => {
                box.appendChild(k);
            });

特殊用法

当img标签没有src属性或者src属性为空时，浏览器默认会以裂图的方式呈现，当用户只是在等待真实src加载，那么该img标签的观感并不太友好，以上六个图片对应img标签dft属性的六个值：load、loadW、empty、none、avatar、none和blank，通过对空img标签附上这些属性可以默认图代替裂图。

注意，当真实图片加载进来之后，应该删除dft属性。

                                <img dft="none"/>
                                <img dft="empty"/>
                                <img dft="load"/>
                                <img dft="avatar"/>
                                <div class="ax-break"></div>
                                <img src dft="none"/>
                                <img src dft="empty"/>
                                <img src dft="load"/>
                                <img src dft="avatar"/>
                                <div class="ax-break"></div>
                                <img src="" dft="none"/>
                                <img src="" dft="empty"/>
                                <img src="" dft="load"/>
                                <img src="" dft="avatar"/>