HTML img标签配置有效src后无法显示图片的问题咨询

你的HTML代码本身没有语法错误，无法加载图片是目标资源站点的访问限制导致的。

• wikia的静态资源服务器配置了防盗链校验规则，会验证请求携带的Referer请求头是否在白名单内：
  • 直接在新标签页打开链接、本地下载资源时，请求的Referer为空，符合校验规则，可正常获取资源
  • 在第三方站点页面嵌入img标签时，浏览器会自动携带当前站点域名作为Referer，不在白名单内，服务器会拒绝返回资源，导致图片加载失败

你可以选择两种方案解决：

• 方案一（兼容性最优）：将目标图片下载后转存到你自己的站点存储、或者支持跨站嵌入的公共图床，使用新的资源地址替换原src属性值
• 方案二（无需转存）：给img标签添加referrerpolicy="no-referrer"属性，让浏览器请求图片时不携带Referer头，即可通过校验，修改后的代码如下：

<img src="https://static.wikia.nocookie.net/harrypotter/images/9/97/Harry_Potter.jpg/revision/latest?cb=20140603201724" referrerpolicy="no-referrer" />

注：极少数老旧版本浏览器不支持referrerpolicy属性，如果需要兼容全版本浏览器，优先选择方案一。

内容的提问来源于stack exchange，提问作者River Cheung