微信小程序开发中，图片报403问题(图片加载失败)解决办法

微信小程序开发中，图片报403问题(图片加载失败)解决办法

一、前提说明

最近自己在搞一个微信小程序项目，用到了微信小程序中wx.previewImage预览图片这个API，在使用这个API需要注意一个问题就是wx.previewImage只能预览位于网络中的图片，无法预览本地的图片(也就是说，项目中的图片引用，无论是使用相对路径还是绝对路径引用都无法实现预览功能)，so，我们必须将所要预览的图片放到网络地址中才可以。

那好吧，既然这样，我就把图片上传了到CSDN上了（偷懒的做法，这里是不对的哈，在这里埋下一个伏笔，在实际的开发过程中，图片都是放到服务器上的），这样图片就是一个网络地址，我首先在浏览器的地址栏中请求一下这个网络地址，发现能够请求到这个图片，哈哈，挺好。

二、问题描述

就这样，我把把想要预览的图片的地址全部变成了CSDN上的网络地址，然后，在重新编译了一下，结果就报出以下错误（只是其中的一部分错误）：

微信小程序报错问题1

当前显示图片无法显示（无法渲染初始的图片），但是点击图片的区域，能够预览图片。

三、思路分析（试错）

what？怎么回事？难道是：

• 请求不到这个图片？
• 页面渲染周期问题？
• 还是CSDN中的图片不能引用？

四、问题解决办法

1、请求不到这个图片？

这个问题肯定不是，之前在浏览器的地址栏中能够请求的。pass

2、页面渲染周期问题？

这个难道是页面初次渲染，数据还没加载完成？需要使用判断条件验证一下？

写了下wx:if判断代码，不是这个问题。pass

3、难道是CSDN中的图片不能站外引用？

这个怎么测试呢？这个很好测试，随意找到一个有图片的网站，打开控制台，找到一个网络地址的图片，把这个网络图片的地址，复制到当前的项目中，试试。经过测试，果然是是CSDN中的图片不能站外引用这个问题所导致的。原因是因为CSDN中的设置了HTTP Referer，当浏览器向web服务器发送请求的时候，一般会带上Referer，告诉服务器我是从哪个页面链接过来的，利用Referer是可以防止图片盗链的，所以这就是报错的原因啦。

好吧，我喜欢的CSDN不能在上面偷懒了，那就换种方式（如果大家有自己的服务器，可以把图片等文件直接放到服务器上，就避免了这个问题啦，若果大家没有服务器的话，可以使用新浪的图床插件，这里我就使用新浪的图床插件啦），我们把图片放到新浪的图床插件上，得到对应的图片网络地址，这样我们使用这个图片网络地址试试，成功啦。