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

50人阅读 评论(0) 收藏 举报
分类:

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

查看评论

OpenGL 1.3 最新扩展

OpenGL 1.3 最新扩展选自glspec13.pdf 原件nightmare(qingrui li) 译1.3版内容F.1 压缩纹理压缩文理可减少显存占用量,并且提高光栅化速度。GL提供一个架构...
  • Nightmare
  • Nightmare
  • 2001-09-24 14:54:00
  • 1461

微信小程序-image(图片)

在微信小程序中,要显示一张图片,有两种图片加载方式: 加载本地图片加载网络图片 加载本地图片 src="/image/arrowright.png" 这句就是加载本地图片资源的。想想iOS...
  • gang544043963
  • gang544043963
  • 2016-10-26 14:20:41
  • 100020

微信小程序开发:添加背景图片

开发一个大学物理实验数据的小程序。由于开发者的设计情节,加个背景图实在很有感觉啊!!受众都是大学生,喜欢的就是这种感觉加载背景图有两种方法:(一)内联样式<view style=&quo...
  • boomsoap
  • boomsoap
  • 2018-04-15 20:14:27
  • 14

解决网络图片加载出现403错误

在<head></head>里面加一个<meta name="referrer" content="...
  • qq_37297687
  • qq_37297687
  • 2018-02-15 13:38:04
  • 274

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

微信小程序开发中,图片报403问题(图片加载失败)解决办法 一、前提说明 最近自己在搞一个微信小程序项目,用到了微信小程序中wx.previewImage预览图片这个API,在使用这个API需...
  • it_cgq
  • it_cgq
  • 2018-04-17 18:34:01
  • 50

小程序的坑之-图片引入正常,但是无缘无故报错问题

代码实例 上述代码中,即使变量的图片路径是对的, 在控制台也会报一个错误:VM421:2 Failed to load image http://livec.dev/storage/ : the se...
  • qq_20417227
  • qq_20417227
  • 2017-09-07 00:40:25
  • 3305

img标签src引用网络图片,页面不显示,返回403错误,网络图片地址在浏览器能加载,放html却不能显示

在html页面加入<meta name="referrer" content="no-referrer">标签,就可以解决页面加载网...
  • yijiupingfan0914
  • yijiupingfan0914
  • 2018-04-17 10:33:59
  • 24

微信小程序图片链接加入正常,控制台报404错误解决方案

代码如下控制台报错如下错误原因及解决方案错误出现的原因就是初始的时候image中url没有值,导致src=" http://178867013.debug.open.weixin.qq.com/pag...
  • qq_35844177
  • qq_35844177
  • 2017-08-31 15:28:28
  • 1291

ftp服务器无法访问图片路径,报403错误问题

在搭建ftp+nginx的服务器时,可能fz上传图片正常,但是在本地浏览器访问时却报403禁止访问错误。这是因为,ftp协议只负责远程上传图片。而访问图片时使用的http服务,图片服务器nginx负责...
  • qq_35017509
  • qq_35017509
  • 2018-03-26 00:11:03
  • 20

小程序图片不显示问题解决

弄了2个小时,http和https的图片就是不显示,但是相对路径的图片就显示。 最后查出问题是因为: image标签被text包裹了,text标签只能用来显示文本,你把text标签去掉应该就好了。 ...
  • m0_38111370
  • m0_38111370
  • 2017-09-06 10:31:30
  • 313
    个人资料
    持之以恒
    等级:
    访问量: 4367
    积分: 176
    排名: 103万+
    文章分类
    文章存档