小程序（或h5）无法显示阿里云服务器上的图片

Hong Jet

已于 2022-12-06 17:32:30 修改

阅读量2.3k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：小程序开发问题文章标签：小程序

于 2022-12-03 16:56:31 首次发布

本文链接：https://blog.youkuaiyun.com/smlljet/article/details/128163587

小程序开发问题专栏收录该内容

27 篇文章

订阅专栏

如果图片服务器设置了“referer”请求头白名单，来控制防止盗链，那么可以尝试一下流程：

微信文档，明确指出“网络请求的 referer 格式固定为 https://servicewechat.com/{appid}/{version}/page-frame.html，其中 {appid} 为小程序的 appid”（https://developers.weixin.qq.com/miniprogram/dev/framework/plugin/development.html#%E5%85%B6%E4%BB%96%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9），而一般使用“referer”进行防盗链。

而我们的图片服务器设置的referer白名单为“https://servicewechat.com/wxcabcdefgh123456/*”，但是微信小程序iOS版，在【刚刚启动小程序】时，image标签加载网络图片的请求，请求头“referer”却是“https://servicewechat.com/preload/page-frame.html”，不符合referer白名单规则，所以被拒绝，服务器返回的是403状态码，但是微信小程序错误日志却是404 Not Found（又是一个坑）。

把我们的图片服务器，防盗链设置referer白名单为改为“https://servicewechat.com/*”则问题解决了，就是不要加“{appid}”这部分路径。

解决方法网上还有其它方案

使用images.weserv.nl方案
使用no-referrer方案(h5)

1 使用images.weserv.nl方案不需要改服务器白名单 亲测有效
在这里插入图片描述
无法显示出来

在这里插入图片描述

在返回的图片链接上加上前缀：https://images.weserv.nl/?url=

在这里插入图片描述

2 使用no-referrer方案,在其它标签上也可用 暂时没测试校验过

<meta name="referrer" content="no-referrer" />

<img referrer="no-referrer|origin|unsafe-url" src="{{item.src}}"/>
<image referrer="no-referrer|origin|unsafe-url" src="{{item.src}}"></image>

<a href="http://example.com" referrer="no-referrer|origin|unsafe-url">xxx</a>