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

如果图片服务器设置了“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>