In the development of WeChat applet, the solution to the problem of picture 403 (picture loading failed)
1. Prerequisites
Recently, I was working on a WeChat applet project, and I used the API of wx.previewImagepreviewing pictures in the WeChat applet. One problem that needs to be paid attention to when using this API is that it wx.previewImagecan only preview the pictures located in the network, but cannot preview the local pictures (that is, the project The image reference in , whether using relative path or absolute path reference, cannot achieve preview function), so, we must put the image to be previewed in the network address.
Well, in this case, I uploaded the pictures to CSDN (lazy approach, this is not right, here is a foreshadowing, in the actual development process, the pictures are put on the server ), so the picture is a network address, I first requested this network address in the browser's address bar, and found that I could request this picture, haha, that's good.
2. Problem description
In this way, I changed all the addresses of the pictures I wanted to preview into the network addresses on CSDN, and then, after recompiling, the following errors were reported (just some of them):
The currently displayed image cannot be displayed (the original image cannot be rendered), but you can preview the image by clicking on the area of the image.
Three, thinking analysis (trial and error)
what? what happened? Is it:
- Can't request this picture?
- Page rendering cycle issues?
- Or can the pictures in CSDN not be quoted?
Fourth, the problem solution
1. Can't request this picture?
This problem is definitely not, it can be requested in the browser's address bar before. pass
2. Problems with page rendering cycle?
Is this the first rendering of the page, and the data has not been loaded yet? Need to use the judgment condition to verify?
I wrote the wx:ifjudgment code, not this problem. pass
3. Could it be that the pictures in CSDN cannot be referenced outside the site?
How to test this? This is a good test. Find a website with pictures at random, open the console, find a picture of a network address, copy the address of this network picture to the current project, and try. After testing, it turned out to be the problem that the pictures in CSDN cannot be referenced outside the site. The reason is because the HTTP Referer is set in CSDN. When the browser sends a request to the web server, it usually brings the Referer to tell the server which page I am linking from. Using Referer can prevent image hotlinking, so This is the reason for the error .
Well, the CSDN I like can't be lazy on it, so let's change the way (if you have your own server, you can put pictures and other files directly on the server to avoid this problem, if you don't have a server. , you can use Sina's picture bed plug-in, here I use Sina's picture bed plug-in), we put the picture on Sina's picture bed plug-in, get the corresponding picture network address, so we use this picture network address to try, That's it.