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

2024-05-18 12:21:59

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

一、前提说明

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

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

二、问题描述

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

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

三、思路分析（试错）

what？怎么回事？难道是：

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

四、问题解决办法

1、请求不到这个图片？

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

2、页面渲染周期问题？

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

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

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

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

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

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

微信小程序开发使用onreachBottom实现页面触底加载及分页
目录一简要介绍一下onreachBottom事件二实例展示三遇到的一些问题一简要介绍一下onreachBottom事件 onreachBottom和onLoad以及onShow一样, ...
解决微信小程序开发中wxss中不能用本地图片
微信小程序开发中wxss中不能用本地图片,我们可以用将我们的图片传到服务器上,然后直接引用在线地址.但是当我们没有服务器时,我们可以用"图床",这个具体可以百度.这里我们用第二种方 ...
java写微信小程序答辩问题_微信小程序开发中遇到问题总结
微信小程序开发中遇到问题总结 1.由于小程序wx.request()方法是异步的,在app.js执行ajax后,各分页加载app.js的全局数据时,无法按顺序加载.例: //app.js App({ ...
关于微信小程序开发中遇到的缺少game.json问题的解决
关于微信小程序开发中遇到的缺少game.json问题的解决参考文章: (1)关于微信小程序开发中遇到的缺少game.json问题的解决 (2)https://www.cnblogs.com/ygxd ...
java写微信小程序答辩问题_java微信小程序开发中加密解密算法总结
详解java微信小程序开发中加密解密算法一.概述微信推出了小程序,很多公司的客户端应用不仅具有了APP.H5.还接入了小程序开发.但是,小程序中竟然没有提供Java版本的加密数据解密算法.这着实让 ...
微信小程序开发中常见问题及解决方法
本文章总结小程序开发中常见的错误问题.希望能帮助初学者少走弯路,避免类似的错误. 1:出现"脚本错误或者未正确调用Page()"的错误提示. 解决方法:出现这个错误的原因通常是因为 ...
微信小程序开发中的二三事之网易云信IMSDK DEMO
本文由作者邹永胜授权网易云社区发布. 简介为了更好的展示我们即时通讯SDK强悍的能力,网易云信IM SDK微信小程序DEMO的开发就提上了日程.用产品的话说就是: 云信 IM 小程序 SDK 的能力 ...
微信小程序页面栈_微信小程序开发中的页面栈及页面路由原理
摘要:小程序的开发方兴未艾,本文以图解的形式详细剖析了小程序开发中的页面栈及页面路由原理,对于该原理的深入理解有助于开发者更好地理解小程序的开发框架,更好地开发出功能强大的小程序. 微信小程序(以下简 ...
微信小程序开发中遇到的一些问题
1.关于Promise对象的打印上面一个是高版本的基础库打印,下面一个是低版本的基础库打印 2.小程序打开项目控制台警告:VM745:1 [Event] 11 listeners of event ...
vant实现下拉刷新和上拉加载_微信小程序 - 实现下拉刷新、上拉加载
在小程序开发中使用下拉刷新和上拉加载非常多,比如常用的展示型首页,而实现这个功能有两种形式,第一种是使用 scroll-view 组件,第二种是不使用 scroll-view 组件而让整个页面刷新,那 ...

最新文章

热门文章