Shulou(Shulou.com)05/31 Report--

Today, the editor will share with you the relevant knowledge points about how to solve the problem of WeChat Mini Programs's splicing picture link bottomless pit. The content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article, let's take a look at it.

Background

Due to the size limit of Mini Program packets, we usually store icon on cdn. The current development process requires the use of the development domain name for pictures in the development test environment and the production domain name online.

Problem recurrence

When Mini Program onLaunch, read the configuration file to get the current environment, and get the development environment image domain name:

. / app.js

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

On the page:. / pages/index/index.js

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

. / pages/index/index.wxml

The picture is rendered, but there is an error in the developer's tool.

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)

If you preview the phone, you can't see the picture.

Analysis.

Take a look at the error message and say the file / 4jZ1L1qECEOsikW2JKsyHQ==/109951164304393164.jpg does not exist locally. That is to say, the page has already been rendered before the onLoad is executed. At this time, the imgHost value is an empty string, and the src of image gets the image link / 4jZ1L1qECEOsikW2JKsyHQ images. The 109951164304393164.jpg image tag thinks this is caused by the local image.

Repair

Of course, there are many ways to fix it.

ImgHost can be assigned at initialization time:

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

You can also make a judgment in the label.

These are all the contents of this article entitled "how to solve the bottomless pit problem of WeChat Mini Programs splicing picture link". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.