在开发者工具中,如果image标签访问的是本地phpstudy8.1.1.3搭建的https后端的图片,则会空白不显示图,但是此图片url是可以复制在浏览器里访问到的。如果改为通过http,本地图片在IDE里也是可以访问到的。
图片url示例:https://wxapp.localhost/addons/zh_cjdianc/img/wxapp_img/main_image/order1_20211012.png
预期的界面表现:

实际的界面表现:

浏览器中访问图片的效果:

如果改为http访问本地后端服务器图片,则可以正常显示。
图片url示例:http://wxapp.localhost/addons/zh_cjdianc/img/wxapp_img/main_image/order1_20211012.png
如果是真实服务器上的图片,image则可以正常显示。
图片url示例:https://www.zebrabox.com.cn/addons/zh_cjdianc/img/wxapp_img/main_image/order1_20211012.png
尝试过关闭并重新开启IDE的禁用授权域名检测功能、尝试过将wxapp.localhost本地域名添加到域名授权列表中。都无效。
猜测是否是因为本地服务端用的https证书是自行生成的测试用证书,证书链不完整,不被IDE信任,且IDE的不校验合法域名、HTTPS证书设置对image标签的作用有异常?

总结:IDE里的图片,本地http显示,本地https不显示,外网服务器http显示,外网服务器https也显示。
本地环境是用phpstudy的小皮集成环境 版本号8.1.1.3 生成的开发者测试https证书。详情如下图:

代码片段:https://microapp.bytedance.com/ide/minicode/doYp19u
