自己写自定义组件的时候，找到几个图标，放在项目目录下，但在使用的时候发现小程序里面显示不出来。

微信小程序里面这样：

看网上的文章说要改成绝对路径，但我在在back-audio里面根本就没有发现play.png这个文件，那么怎么改src都不可能显示出来。除非放在static里面，但我想把组件独立出来使用。

无意中看到别人写的自定义组件，里面也有使用图标，试了下，可行！

图片、图标使用require导入

三个控制播放图标代码：

<template>
    <view class="audio-warp">
        <view class="audio-time" v-if="showTime">{{ audioTimeUpdate }}</view>
        <view class="control-btns">
            <image :src="backIcon" @click="backClick()" :class="{disabled: backDisabled}"></image>
            <view class="" @click="audioPlayPause()">
                <image :src="pauseIcon" v-if="play"></image>
                <image :src="playIcon" v-else></image>
            </view>
            <image :src="forwardIcon" @click="forwardClick()" :class="{disabled: forwardDisabled}"></image>
        </view>
    </view>
</template>
...
        data() {
            return {
                playIcon: require('./icons/play.png'),
                pauseIcon: require('./icons/pause.png'),
                backIcon: require('./icons/player_back.png'),
                forwardIcon: require('./icons/player_forward.png'),

在data中使用require来生成图标的变量对象，记得使用相对路径，也就是图标相对于当前页面的路径，然后使用v-model与src绑定。

查看微信小程序可以发现这些图标其实是被uniapp转换成了Data URI scheme。

网页图片中的src可以是一个图片对象，这样可以减少请求。

在 Data URI scheme 中：

data 表示取得数据的协定名称；

image/png 是数据类型名称；

base64 是数据的编码方法，逗号后面就是这个image/png文件base64编码后的数据。

原来，Data URI scheme支持的类型有不少。

data: 文本数据 data: text/plain,  文本数据 
data: text/html,  HTML代码 
data: text/html;base64,  base64编码的HTML代码 
data: text/css,  CSS代码 
data: text/css;base64,  base64编码的CSS代码
data: text/javascript,  Javascript代码 
data: text/javascript;base64,  base64编码的Javascript代码 
data: image/gif;base64,  base64编码的gif图片数据 
data: image/png;base64,  base64编码的png图片数据 
data: image/jpeg;base64,  base64编码的jpeg图片数据 
data: image/xicon;base64,  base64编码的icon图片数据

这下再也不怕什么路径问题了，直接就嵌入到页面中了。

另外，有些初学者在uniapp使用传统img，容易出问题，在uniapp里，使用image来显示图片。

我是@爱玩的安哥，关注我获取更多有用知识