微信小程序----相對路徑圖片不顯示
出現場景
在本地調試的時候本地圖片顯示,可是手機瀏覽的時候本地圖片不顯示。javascript
出現圖片不顯示的緣由
小程序只支持網絡路徑和base64的圖片。圖片轉base64在線工具html
處理方法
將圖片都放到服務器，而後直接採用網絡路徑。
1.1 優勢是可以放大量的圖片。
1.2 缺點是有時開發中有大量的小圖片，或者修改小圖標，對於開發者來講，更換會很麻煩。前端將圖片都轉換成 base64 的圖片保存，使用時直接引入。圖片轉base64在線工具
2.1 優勢是方便快捷，開發過程當中容易更換。
2.2 缺點是因爲微信小程序規定了每一個文件不能超過500MB，超過另行打包。因此若是圖片過大，或者量過大，都不方便。java
優化處理
將網絡路徑圖片和 base64 的圖片結合使用。圖片轉base64在線工具git
開發大圖片（輪播等）或圖片量大（商品圖片等）的場景時，採用網絡路徑。github
優勢是產品發佈後方便圖片的上下架，不用再提交審覈，使用靜態圖片的尷尬和麻煩。web
開發logo、導航等小圖片時，採用 base64 的圖片。圖片轉base64在線工具express
優勢是開發時方便開發者更換，引入方便；轉換快捷，用圖片轉base64在線工具可直接轉換；不用開發時老是往服務器上傳圖片。小程序
實踐開發
開發效果圖
首頁的輪播和網吧列表都是採用的網絡路徑，訂單頁面的右箭頭和更多商品圖標都是採用的 base64 圖片。
開發代碼
1. 首頁輪播和店鋪列表JS
const app = getApp();
const urlList = require('../../utils/config.js');
Page({
data: {
supplierList: [],
iconList: iconList,
bannerInfo: null,
indicatorDots: true,//是否顯示面板指示點
autoplay: true,//是否開啓自動切換
interval: 3000,//自動切換時間間隔
duration: 500,//滑動動畫時長
bannerList: [],
shopList: [],
currentPage: 1,
pageSize: 10,
total: 1000,
myList: []
},
onLoad(){
// 獲取分享信息
this.getShare();
},
onShow(){
// 獲取輪播列表
this.getBannerList();
// 獲取當前地址
wx.getLocation({
success: res => {
if (res.errMsg == 'getLocation:ok') {
this.getShopList(res);
}
},
fail: res => {
this.wetoast.toast({ title: '獲取定位失敗，請打開定位，從新進入！' });
}
})
},
// 獲取店鋪列表
getShopList(obj){
// 判斷是否還有更多數據
if (!app.loadMoreData(this)) { return }
// 請求數據
let account = wx.getStorageSync('accountInfo');
let location = obj;
wx.request({
url: urlList.shopListUrl,
data: {
// accountID: account.accountID,
// passWord: account.passWord,
longitude: location.longitude,
latitude: location.latitude,
currentPage: this.data.currentPage,
pageSize: this.data.pageSize,
sType: '1',
token: app.globalData.token
},
success: res => {
if(res.data.state == 'true'){
console.log(res)
this.setData({
shopList: this.data.shopList.concat(res.data.data.supplierList),
currentPage: ++this.data.currentPage,
total: res.data.data.total,
__noMoreData__: app.loadSuccessData(this, res.data.data.supplierList)
})
}else{
console.log('網吧列表：' + res.data.exception)
this.wetoast.toast({ title: '網吧列表加載失敗！' });
}
}
})
},
// 獲取輪播列表
getBannerList(){
wx.request({
url: urlList.advertPicListUrl,
data: { appID: '4'},
success: res => {
if (res.data.state == 'true') {
// console.log(res.data.data.picList)
this.setData({
bannerList: res.data.data.picList
})
}else{
console.log('輪播列表：' + res.data.exception)
this.wetoast.toast({ title: '輪播列表加載失敗！' });
}
}
})
},
//滾動加載
onReachBottom(){
this.getShopList(app.globalData.location);
}
})
1. 首頁輪播和店鋪列表WXML
<scroll-view scroll-y="true"> <swiper class="rui-swiper" style='height:{{bannerInfo.height}}px' current="0" indicator-dots="{{indicatorDots}}" vertical="{{vertical}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" indicator-color="rgba(0,0,0,.5)" indicator-active-color="#fff"> <block wx:for-items="{{bannerList}}" wx:key="banner"> <swiper-item> <block wx:if="{{item}}"> // 讀取輪播圖片的網絡路徑 <image class="rui-full" bindtap='bannerUrl' data-banner="{{item}}" style='width:{{bannerInfo.width}}px;height:{{bannerInfo.height}}px' src="{{item.picUrl}}"></image> </block> <block wx:else> <image class="rui-full" style='width:{{bannerInfo.width}}px;height:{{bannerInfo.height}}px' src="../../images/default_pic.png"></image> </block> </swiper-item> </block> </swiper> </scroll-view> <!--網吧列表 --> <view wx:if="{{shopList.length > 0}}" class='rui-shop-sort'>附近網吧</view> <view wx:if="{{shopList.length > 0}}" wx:for="{{shopList}}" wx:key="shopList"> <view class='rui-shop-list' bindtap='goToGoodsList' data-shopid="{{item.shopID}}"> // 讀取網吧列表的網吧圖片的網絡路徑 <image class='rui-shop-img' src='{{item.sPicS}}'></image> <view class='rui-shop-box'> <view class='rui-shop-name'> {{item.userName}} <text class='rui-icon' wx:if="{{item.ishot == 1 && index < 3}}" style="background:url({{iconList.hotUrl}}) no-repeat center center/15px 15px;height:15px;width:15px;"></text> </view> <view class='rui-shop-distance'> <text style='margin-right:10px;color:#ff8e32;' wx:if="{{item.labels.length > 0 && labelsIndex < 4}}" wx:for-index="labelsIndex" wx:for="{{item.labels}}" wx:key="labels" wx:for-item="labels">{{labels}}</text> <text class='rui-fr'>{{item.gpsDistance}}</text> </view> <view class='rui-shop-address'>地址：{{item.corpAddress}}</view> <view class='rui-shop-active' wx:if="{{item.activeDesc}}"> <text>{{item.activeDesc}}</text> <text class='active'>惠</text> </view> </view> </view> </view>
2. 訂單頁的右箭頭和更多商品JS
const app = getApp();
const urlList = require('../../utils/config.js');
const iconList = require('../../utils/iconPath.js');
Page({
data: {
currentPage: 1,
pageSize: 10,
total: 1000,
orderList: [],
__noMoreData__: {
isMore: false,
title: '正在加載更多數據了...'
}
},
onPullDownRefresh(){
this.setData({
currentPage: 1,
pageSize: 10,
total: 1000,
orderList: [],
__noMoreData__: {
isMore: true,
title: '正在加載更多數據了...'
}
})
setTimeout(() => { this.getOrderList(); },1000); }, onLoad(){ // 將 base64 的文件保存到當前page的data中 this.setData({ iconList: iconList }); }, onShow(){ // 獲取訂單列表 this.getOrderList(); }, // 獲取訂單列表 getOrderList(){ // 判斷是否還有更多數據 if (!app.loadMoreData(this)){return} // 請求數據 wx.request({ url: urlList.orderListUrl, data: { currentPage: this.data.currentPage, pageSize: this.data.pageSize, token: app.getToken() }, success: res => { // console.log(res) app.withData(res, this, res => { if (res.data.state == 'true'){ // console.log(res.data.data.orderList) this.setData({ currentPage: ++this.data.currentPage, total: res.data.data.total, orderList: this.data.orderList.concat(res.data.data.orderList) }) wx.stopPullDownRefresh(); } }) } }) }, // 滾動到底部加載 onReachBottom() { this.getOrderList(); } })
2. 訂單頁的右箭頭和更多商品WXML
<view class='rui-order-li' wx:for="{{orderList}}" wx:key="orderList"> <view class='rui-order-head'> <view class='rui-order-shop-name' data-shop='{{item}}' bindtap='goToShop'> {{item.userName}} // 讀取右箭頭的base64的圖片 <text class='rui-icon' style='background:url({{iconList.moreUrl}}) no-repeat center center/8px 15px;height:15px;width:15px;'></text> </view> <view class='rui-order-state {{item.orderState == 0 ? "rui-colory" : item.orderState == 4 ? "rui-colorg" : "rui-colorp"}}'>{{item.orderStateText}}</view> </view> <view class='rui-order-goodslist' id='{{item.orderID}}' bindtap='getOrderId'> <view class='rui-fl'> <image wx:for="{{item.goodsList}}" wx:if="{{goodsnum < 5}}" wx:for-index="goodsnum" wx:key="goodsList" wx:for-item="goods" class='rui-order-goodsimg' src="{{goods.sPics}}"></image> // 讀取更多商品的base64的圖片 <view class='rui-order-detail-btn' style='background:url({{iconList.moreGoodsUrl}}) no-repeat center center/25px 5px;'></view> </view> <view class='rui-order-price'> <view class='rui-colory'>￥{{item.goodsAmountAll}}</view> <view class='rui-colorp rui-fs12'>共{{item.totalGoodsNum}}件</view> </view> </view> <view class='rui-order-head'> {{item.orderTime}} <view wx:if="{{item.orderState == 0}}" class='order-btn' data-orderid="{{item}}" bindtap='goToPay'>當即支付</view> <view wx:if="{{item.orderState == 4}}" class='order-btn' data-orderid="{{item}}" bindtap='repeatBuy'>再次購買</view> </view> </view>
base64 的保存文件編輯
const iconPath = {
starUrl: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA4RpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTMyIDc5LjE1OTI4NCwgMjAxNi8wNC8xOS0xMzoxMzo0MCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo4OWIzY2I4MC1jMGU1LTQxNGMtODg4My0yNjNjODQ1MTRjOWUiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6ODg1REFBQjg0Nzg2MTFFOEJBNzc5NDg4NzE1MUY0QUMiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6ODg1REFBQjc0Nzg2MTFFOEJBNzc5NDg4NzE1MUY0QUMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6ZmUyYzhkYWYtOTUyZi0yYjRlLWFjODYtNzY3OGM2NzNmNDA1IiBzdFJlZjpkb2N1bWVudElEPSJhZG9iZTpkb2NpZDpwaG90b3Nob3A6ZmJjNjU3ZTktNDQ3Ny0xMWU4LWJjNzUtZjgyODA4NzM1M2M1Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+p+ef2gAAAMhJREFUeNpi/N9nxIADlEPp1UB8D12SEY/G/zA12CSZGHCD93jk8Go8S0ijEhCnAbEgA3EgFIiNmaCMmUB8F0q7YFEMMrwDiN8B8SqQRSxQv+yBakiD4ntILjgDsgHNC/eQQ1UQ5gwojez01VDD98CihgUtFGch8dOQbEhHD2UmHBGfBrWlE+qCDnRFLGj8NKii90i2uCD5uxObjcgmhyE5DcbuQHI+isYOaIB0QgMBBkA2VaD5G8WprlD/dWLx9yyoofDAAwgwAIUJMVmp6d19AAAAAElFTkSuQmCC'
}
module.exports = iconPath;
base64 的保存文件引入
const iconList = require('../../utils/iconPath.js');
base64 的保存文件使用
js微信小程序
// 將 base64 的文件保存到當前page的data中
this.setData({ iconList: iconList });
wxml
// 讀取更多商品的base64的圖片 <view class='rui-order-detail-btn' style='background:url({{iconList.moreGoodsUrl}}) no-repeat center center/25px 5px;'></view>
總結
解決問題的方法有不少，只要找到適合本身的最好。我的建議微信小程序的圖片能夠兩種方式結合使用。
其餘
相關文章
- 1. 微信小程序----相對路徑圖片不顯示
- 2. 微信小程序—相對路徑和絕對路徑
- 3. 微信小程序-image圖片顯示
- 4. vue 相對路徑的圖片 不顯示問題
- 5. vue 數組中相對路徑的圖片 不顯示問題
- 6. vue 寫相對路徑圖片不顯示
- 7. 微信小程序-圖片等比例顯示不變形
- 8. WordPress微信小程序 圖片不顯示解決辦法
- 9. 微信小程序使用swiper組件不顯示圖片？
- 10. 微信小程序圖片404時顯示默認圖片
- 更多相關文章...
- • ADO 顯示 - ADO 教程
- • netwox顯示網絡配置信息 - TCP/IP教程
- • SpringBoot中properties文件不能自動提示解決方法
- • NewSQL-TiDB相關
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. 跳槽面試的幾個實用小技巧，不妨看看！
- 2. Mac實用技巧 |如何使用Mac系統中自帶的預覽工具將圖片變成黑白色?
- 3. Mac實用技巧 |如何使用Mac系統中自帶的預覽工具將圖片變成黑白色?
- 4. 如何使用Mac系統中自帶的預覽工具將圖片變成黑白色?
- 5. Mac OS非兼容Windows軟件運行解決方案——「以VMware & Microsoft Access爲例「
- 6. 封裝 pyinstaller -F -i b.ico excel.py
- 7. 數據庫作業三ER圖待完善
- 8. nvm安裝使用低版本node.js(非命令安裝)
- 9. 如何快速轉換圖片格式
- 10. 將表格內容分條轉換爲若干文檔
歡迎關注本站公眾號,獲取更多信息
