微信小程序拼接图片链接无底洞深入探究


Posted in Javascript onSeptember 03, 2019

背景

由于小程序包大小限制,我们一般都会将icon存放到cdn上。现在的开发流程需要在开发测试环境下图片使用开发域名,线上使用生产域名。

问题重现

在小程序onLaunch的时候读取配置文件获取当前环境,并得到开发环境图片域名:

./app.js

const { imgHostDev, imgHostProd, env } = require('./app.config.js')
App({
 onLaunch: function () {
 this.globalData.imageHost = env == 'dev' ? imgHostDev : imgHostProd
 },
 globalData: {
 imageHost: ''
 }
})

在页面中:./pages/index/index.js

const app = getApp()

Page({
 data: {
 imgHost: ''
 },
 onLoad: function () {
 this.setData({
  imgHost: app.globalData.imageHost
 })
 }
})

./pages/index/index.wxml

<image src="{{imgHost}}/4jZ1L1qECEOsikW2JKsyHQ==/109951164304393164.jpg" mode="aspectFit"></image>

图片渲染出来了,但是在开发者工具中有报错

VM1334:1 Failed to load local image resource /4jZ1L1qECEOsikW2JKsyHQ==/109951164304393164.jpg
the server responded with a status of 500 (HTTP/1.1 500 Internal Server Error)

手机预览就看不到图片。。。

分析

看一下报错信息,说本地不存在/4jZ1L1qECEOsikW2JKsyHQ==/109951164304393164.jpg这个文件。 也就是说页面在执行onLoad之前就已经渲染了,这个时候imgHost值为空字符串,image的src拿到的图片链接就是/4jZ1L1qECEOsikW2JKsyHQ==/109951164304393164.jpg,image标签就以为这是本地图片导致的。

修复

当然修复的方法有很多,

可以将imgHost在初始化的时候就赋值:

const app = getApp()

Page({
 data: {
 imgHost: app.globalData.imageHost
 },
 onLoad: function () {

 }
})

也可以在标签中做判断

<image src="{{imgHost ? imgHost + '/4jZ1L1qECEOsikW2JKsyHQ==/109951164304393164.jpg' : ''}}" mode="aspectFit"></image>

更多尝试

之前都是渲染网络图片,如果读取本地图片更换不同文件夹中的同名图片呢?发现也是如此。

如果图片链接里有多个变量,就建议在wxs文件中写一个方法来配置图片

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
jQuery Ajax 实例全解析
Apr 20 Javascript
jQuery bxCarousel实现图片滚动切换效果示例代码
May 15 Javascript
JavaScript作用域与作用域链深入解析
Dec 06 Javascript
JavaScript实现对下拉列表值进行排序的方法
Jul 15 Javascript
基于javascript实现随机颜色变化效果
Jan 14 Javascript
Bootstrap~多级导航(级联导航)的实现效果【附代码】
Mar 08 Javascript
全面解析bootstrap格子布局
May 22 Javascript
分享一道关于闭包、bind和this的面试题
Feb 20 Javascript
js实现倒计时器自定义时间和暂停
Feb 25 Javascript
layui 富文本图片上传接口与普通按钮 文件上传接口的例子
Sep 23 Javascript
vue弹出框组件封装实例代码
Oct 31 Javascript
在vue中使用console.log无效的解决
Aug 09 Javascript
layui radio单选限制下一个radio单选的实例
Sep 03 #Javascript
JavaScript Array对象基本方法详解
Sep 03 #Javascript
微信小程序通过一个json实现分享朋友圈图片
Sep 03 #Javascript
layui 实现自动选择radio单选框(checked)的方法
Sep 03 #Javascript
Node.js fs模块(文件模块)创建、删除目录(文件)读取写入文件流的方法
Sep 03 #Javascript
layui 点击重置按钮, select 并没有被重置的解决方法
Sep 03 #Javascript
Layui 动态禁止select下拉的例子
Sep 03 #Javascript
You might like
php Http_Template_IT类库进行模板替换
2009/03/19 PHP
php实现水仙花数示例分享
2014/04/03 PHP
codeigniter集成ucenter1.6双向通信的解决办法
2014/06/12 PHP
php常用数组函数实例小结
2016/12/29 PHP
基于jquery的大众点评,分类导航实现代码
2011/08/23 Javascript
jQuery的one()方法用法实例
2015/01/19 Javascript
使用CoffeeScrip优美方式编写javascript代码
2015/10/28 Javascript
借助FileReader实现将文件编码为Base64后通过AJAX上传
2015/12/24 Javascript
jquery实现一个简单的表单验证实例
2016/03/30 Javascript
javascript中利用柯里化函数实现bind方法
2016/04/29 Javascript
详解js产生对象的3种基本方式(工厂模式,构造函数模式,原型模式)
2017/01/09 Javascript
javascript判断回文数详解及实现代码
2017/02/03 Javascript
微信小程序仿微信运动步数排行(交互)
2018/07/13 Javascript
Vue中保存数据到磁盘文件的方法
2018/09/06 Javascript
[04:10]DOTA2英雄梦之声_第11期_圣堂刺客
2014/06/21 DOTA
python持久性管理pickle模块详细介绍
2015/02/18 Python
python利用高阶函数实现剪枝函数
2018/03/20 Python
python3中zip()函数使用详解
2018/06/29 Python
使用Python的Dataframe取两列时间值相差一年的所有行方法
2018/07/10 Python
python 杀死自身进程的实现方法
2019/07/01 Python
python3.6 如何将list存入txt后再读出list的方法
2019/07/02 Python
Python+Selenium使用Page Object实现页面自动化测试
2019/07/14 Python
Django 对IP访问频率进行限制的例子
2019/08/30 Python
python pycharm的安装及其使用
2019/10/11 Python
python实时监控logstash日志代码
2020/04/27 Python
CSS3字体效果的设置方法小结
2016/06/13 HTML / CSS
CSS3中几个新增加的盒模型属性使用教程
2016/03/01 HTML / CSS
惠普加拿大在线商店:HP加拿大
2017/09/15 全球购物
印度首选时尚目的地:Reliance Trends
2018/01/17 全球购物
办公室岗位职责
2014/02/12 职场文书
师德师风学习材料
2014/12/19 职场文书
少先队入队仪式主持词
2015/07/04 职场文书
教师学习中国梦心得体会
2016/01/05 职场文书
机械原理课程设计心得体会
2016/01/15 职场文书
MySQL创建高性能索引的全步骤
2021/05/02 MySQL
MySQL数据库简介与基本操作
2022/05/30 MySQL