直接给 标签配置请求头在标准 HTML 中是无法实现的。不过别担心，这个问题有成熟的解决方案。核心思路都是“曲线救国”：先用能携带请求头的方式（如 fetch 或 XMLHttpRequest）获取图片数据，再将数据转换成 URL 填入 src。下面为你详细拆解几种主流方案：

图片

1
2
3
4
5
6
7
8
9
10
11
12
13
// 示例：使用 fetch 请求带认证头的图片
const res = await fetch(url, {
  headers: {
    Authorization: 'Bearer ' + token
  }
})

const blob = await res.blob()
img.src = URL.createObjectURL(blob)
img.onload = () => {
  URL.revokeObjectURL(blob)
}

PDF 返回ReadableStream

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
const res = await fetch(url, {
  headers: {
    Authorization: 'Bearer ' + token
  }
})

const stream = res.body
const reader = stream.getReader()
const chunks = []

while (true) {
  const { done, value } = await reader.read()
  if (done) break
  chunks.push(value)
}

const blob = new Blob(chunks, { type: 'application/pdf' })
iframe.src = URL.createObjectURL(blob) // 直接放在iframe中预览