HTML生成PDF时img标签引用的服务器图片无法显示是什么原因

问题原因排查 #

1. 显性语法错误 #

你给出的img标签中，src属性的资源地址协议头多写了1个英文冒号，错误写法为https:://，正确的HTTPS协议头格式为https://，该错误会直接导致资源寻址失败，图片无法加载。

修正后的img标签代码如下：

<img class="characteristics-image" src="https://translate.orivet.com/images/last-page-2.png">

如果修正上述错误后图片依旧无法正常显示，可依次排查以下常见诱因：

2. 资源访问限制 #

• 图片服务器配置了防盗链规则，PDF生成工具发起的请求不在白名单内，也未携带合法的referer信息，被服务器拒绝访问
• 该图片资源需要账号鉴权才可访问，PDF生成工具发起的请求未携带对应的身份凭证（Cookie、授权Token等），无法获取资源

3. PDF生成工具限制 #

• 部分PDF生成工具默认禁用外部网络资源加载，需要手动修改配置放开限制
• 所用生成工具不支持远程网络资源引用，需要将图片下载到本地后引用本地路径生成

4. 网络连通问题 #

部署PDF生成服务的服务器无法正常连通目标图片服务器，或无法访问公网，导致资源拉取超时失败

内容的提问来源于stack exchange，提问作者Jounior Developer