嘿，这个问题问到点子上了！先给你个明确的结论：常规情况下，直接用<img>、<video>这类HTML媒体元素加载资源时，确实没办法直接设置自定义请求头——浏览器发起这些请求时，只会自动携带默认的请求头（比如Accept、User-Agent这类），咱们没法像调用fetch()那样手动添加Authorization这类自定义头。

你提到的把认证信息放到URL查询参数里，比如：

<img src="http://server.com/image.jpg?authorization=xxx" />

这确实是目前最常用的替代方案，不少后端服务也支持这种方式做身份校验。不过要注意，查询参数会暴露在URL里，可能存在安全风险（比如被服务器日志记录、被缓存捕获），如果是敏感信息的话，得仔细权衡风险。

当然还有个稍复杂些的方案：先用fetch()带上需要的自定义请求头获取媒体资源的Blob数据，再把Blob转换成Object URL赋值给媒体元素的src属性。举个实际例子：

fetch('http://server.com/image.jpg', {
  headers: {
    'Authorization': 'xxx'
  }
})
.then(response => response.blob())
.then(blob => {
  const img = document.querySelector('img');
  img.src = URL.createObjectURL(blob);
  // 记得在资源不用时释放内存
  img.onload = () => URL.revokeObjectURL(img.src);
})
.catch(err => console.error('资源加载失败:', err));

这种方法既能带上自定义头，又不会把敏感信息暴露在URL里，但缺点是需要额外写代码处理请求和Blob资源，还得注意内存泄漏的问题。

总结一下：追求简单快捷的话，用查询参数是首选；如果对安全性要求更高，fetch+Blob的方式更合适，但要多处理些细节~

备注：内容来源于stack exchange，提问作者Alex