微信小程序开发中,图片报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不能在上面偷懒了,那就换种方式(如果大家有自己的服务器,可以把图片等文件直接放到服务器上,就避免了这个问题啦,若果大家没有服务器的话,可以使用新浪的图床插件,这里我就使用新浪的图床插件啦),我们把图片放到新浪的图床插件上,得到对应的图片网络地址,这样我们使用这个图片网络地址试试,成功啦。

猜你喜欢

转载自blog.csdn.net/it_cgq/article/details/79978896
今日推荐