微信小程序开发中图片消息403问题的解决方案（图片加载失败）

微信小程序开发中图片消息403问题的解决方案（图片加载失败）

1、 先决条件描述

最近，我在做一个微信小程序项目，我使用了Wx。previewImage微信小程序中的预览图像API。使用此API时，我需要注意的一点是，Wx PreviewImage只能预览位于网络上的图片，但不能预览本地图片（即，项目中的图片引用不能通过使用相对路径或绝对路径引用来预览）。因此，我们必须将要预览的图片放在网络地址中。

好吧，既然是这样，我已经将图像上传到CSDN（懒惰的做法，这里是错误的，我将在这里埋下伏笔。在实际的开发过程中，图像被放置在服务器上），因此图像是一个网络地址。我首先在浏览器的地址栏中请求了网络地址，发现我可以请求图像。哈哈，很好。

2、 问题描述

通过这种方式，我将要预览的图片的所有地址更改为CSDN上的网络地址。然后，在重新编译后，报告了以下错误（只是其中的一部分）：

微信小程序错误1

无法显示当前显示的图片（无法渲染初始图片），但可以通过单击图片区域预览图片。

3、 思维分析（试错）

什么发生什么事？它是：

无法请求此图片？

页面呈现周期问题？

或者可以不引用CSDN中的图像吗？

4、 解决方案

1.无法请求此图片？

这个问题绝对不是以前可以在浏览器的地址栏中请求的问题。通过

2.页面呈现周期问题？

这是第一次呈现页面而数据尚未加载吗？需要使用判断条件进行验证？

我写了wx:if判断代码。这不是问题所在。通过

3.是因为CSDN中的图片不能在车站外引用吗？

如何测试？这是一个很好的测试。随机找到一个带有图片的网站，打开控制台，找到网络地址的图片，将网络图像的地址复制到当前项目，然后尝试。经过测试，这确实是由CSDN中的图像无法在站点外引用的问题引起的。原因是在CSDN中设置了HTTP引用。当浏览器向web服务器发送请求时，它通常会带上引用者来告诉服务器我从哪个页面链接。使用referer可以防止图像盗版，因此这是错误报告的原因。

好吧，我最喜欢的CSDN不能偷懒，所以让我们改变一下方式（如果你有自己的服务器，你可以直接将图片和其他文件放在服务器上以避免这个问题，如果你没有服务器，你就可以使用新浪的床插件，我在这里使用新浪床插件）。让我们把图片放在新浪的床插件上，以获得相应的图像网络地址，所以我们尝试使用这个图像网络地址。