Uniapp|image无法显示图片
自己写自定义组件的时候,找到几个图标,放在项目目录下,但在使用的时候发现小程序里面显示不出来。微信小程序里面这样:看网上的文章说要改成绝对路径,但我在在back-audio里面根本就没有发现play.png这个文件,那么怎么改src都不可能显示出来。除非放在static里面,但我想把组件独立出来使用。无意中看到别人写的自定义组件,里面也有使用图标,试了下,可行!图片、图标使用require导入三个
自己写自定义组件的时候,找到几个图标,放在项目目录下,但在使用的时候发现小程序里面显示不出来。
微信小程序里面这样:
看网上的文章说要改成绝对路径,但我在在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来显示图片。
我是@爱玩的安哥,关注我获取更多有用知识
更多推荐
所有评论(0)