自己写自定义组件的时候，找到几个图标，放在项目目录下，但在使用的时候发现小程序里面显示不出来。
微信小程序里面这样：
看网上的文章说要改成绝对路径，但我在在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来显示图片。
我是@爱玩的安哥，关注我获取更多有用知识
最新评论