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


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 相关文章推荐
静态页面的值传递(三部曲)
Sep 25 Javascript
js自动生成的元素与页面原有元素发生堆叠的解决方法
Oct 24 Javascript
js+canvas简单绘制圆圈的方法
Jan 28 Javascript
jquery点击改变class并toggle的实现代码
May 15 Javascript
Bootstrap框架结合jQuery仿百度换肤功能实例解析
Sep 17 Javascript
js学习笔记之事件处理模型
Oct 31 Javascript
Bootstrap 模态对话框只加载一次 remote 数据的完美解决办法
Jul 09 Javascript
微信小程序wx.previewImage预览图片实例详解
Dec 07 Javascript
laravel5.3 vue 实现收藏夹功能实例详解
Jan 21 Javascript
小程序识别身份证,银行卡,营业执照,驾照的实现
Nov 05 Javascript
JavaScript实现指定数量的并发限制的示例代码
Mar 10 Javascript
ES11屡试不爽的新特性,你用上了几个
Oct 21 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
CodeIgniter框架数据库基本操作示例
2018/05/24 PHP
js null undefined 空区别说明
2010/06/13 Javascript
javascript数组去重的方法汇总
2015/04/14 Javascript
js限制文本框的输入内容代码分享(3类)
2015/08/20 Javascript
jquery解析json格式数据的方法(对象、字符串)
2015/11/24 Javascript
js获取当前年月日-YYYYmmDD格式的实现代码
2016/06/01 Javascript
JavaScript随机生成颜色的方法
2016/10/15 Javascript
bootstrap下拉菜单使用方法解析
2017/01/13 Javascript
Vue.js实战之组件之间的数据传递
2017/04/01 Javascript
微信小程序 侧滑删除(左滑删除)
2017/05/23 Javascript
vue中如何创建多个ueditor实例教程
2017/11/14 Javascript
浅谈vue加载优化策略
2019/03/19 Javascript
Vue安装浏览器开发工具的步骤详解
2019/05/12 Javascript
如何写好一个vue组件,老夫的一年经验全在这了(推荐)
2019/05/18 Javascript
jQuery开发仿QQ版音乐播放器
2020/07/10 jQuery
基于Python实现的扫雷游戏实例代码
2014/08/01 Python
在Python中使用pngquant压缩png图片的教程
2015/04/09 Python
Python的Django框架中使用SQLAlchemy操作数据库的教程
2016/06/02 Python
python 字典 按key值大小 倒序取值的实例
2018/07/06 Python
python3 kmp 字符串匹配的方法
2018/07/07 Python
Python中return self的用法详解
2018/07/27 Python
实例分析python3实现并发访问水平切分表
2018/09/29 Python
python做反被爬保护的方法
2019/07/01 Python
浅析python 中大括号中括号小括号的区分
2019/07/29 Python
Python with关键字,上下文管理器,@contextmanager文件操作示例
2019/10/17 Python
Python selenium的基本使用方法分析
2019/12/21 Python
Python图像处理库PIL的ImageDraw模块介绍详解
2020/02/26 Python
Python中socket网络通信是干嘛的
2020/05/27 Python
No module named ‘win32gui‘ 的解决方法(踩坑之旅)
2021/02/18 Python
德国著名廉价网上药店:Shop-Apotheke
2017/07/23 全球购物
澳大利亚Mocha官方网站:包、钱包、珠宝和配饰
2019/07/18 全球购物
机电一体化求职信
2014/03/10 职场文书
二手车转让协议书
2015/01/29 职场文书
pdf论文中python画的图Type 3 fonts字体不兼容的解决方案
2021/04/24 Python
MySQL中datetime时间字段的四舍五入操作
2021/10/05 MySQL
基于MySql验证的vsftpd虚拟用户
2021/11/07 MySQL