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

更新时间：2019年09月03日 10:49:06 作者：padding0

这篇文章主要给大家介绍了关于微信小程序拼接图片链接无底洞深入探究的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用微信小程序具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧

背景

由于小程序包大小限制，我们一般都会将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自定义加载loading效果
这篇文章主要为大家详细介绍了javascript自定义加载loading效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-09-09
多种方法实现JS动态添加事件
JS动态添加事件的方法有很多，我们可以使用setAttribute、attachEvent 和 addEventListener等等，感兴趣的朋友可以参考下
2013-11-11
JavaScript实现封闭区域布尔运算的示例代码
这篇文章主要介绍了JavaScript实现封闭区域布尔运算的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-06-06
javascript模版引擎-tmpl的bug修复与性能优化分析
在平时编码中，经常要做拼接字符串的工作，如把json数据用HTML展示出来，以往字符串拼接与逻辑混在在一起会让代码晦涩不堪，加大了多人协作与维护的成本。而采用前端模板机制就能很好的解决这个问题
2011-10-10
Javascript的原型和原型链你了解吗
这篇文章主要为大家详细介绍了Javascript的原型和原型链，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
2022-03-03
如何高效率去掉js数组中的重复项
如何高效率去掉js数组中的重复项呢？下面小编就为大家带来一篇高效率去掉js数组中重复项的实现方法。希望对大家有所帮助。一起跟随小编过来看看吧
2016-04-04
微信小程序使用自定义组件导航实现当前页面高亮
这篇文章主要介绍了微信小程序使用自定义组件导航实现当前页面高亮，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-01-01
精通Javascript系列之Javascript基础篇
javascrpit的基本概念分析，刚开始学习js的朋友可以参考下。
2011-06-06
JavaScript 数组的深度复制解析
一般情况下，使用 “=” 可以实现赋值。但对于数组、对象、函数等这些引用类型的数据，这个符号就不好使了。这篇文章主要介绍了JavaScript 数组的深度复制解析的相关资料,需要的朋友可以参考下
2016-11-11
JavaScript+CSS实现仿Mootools竖排弹性动画菜单效果
这篇文章主要介绍了JavaScript+CSS实现仿Mootools竖排弹性动画菜单效果,可实现鼠标滑过菜单项呈现弹性移动显示的效果,具有一定参考借鉴价值,需要的朋友可以参考下
2015-10-10