<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vite App</title>
</head>
<body>
<div id="app"></div>
<script>
// 保存原始的 Image 构造函数
const OriginalImage = window.Image;
// 创建带有 token 的图片加载函数
async function loadImageWithToken(url, img) {
const token = localStorage.getItem('token') || 'default-token';
try {
const response = await fetch(url, {
headers: {
'Authorization': `Bearer ${token}`
// 或者使用其他 token 格式
// 'X-Token': token
}
});
const blob = await response.blob();
const objectUrl = URL.createObjectURL(blob);
img.src = objectUrl;
// 清理 ObjectURL
img.onload = () => {
URL.revokeObjectURL(objectUrl);
};
} catch (error) {
console.error('图片加载失败:', error);
// 可以设置一个默认图片
// img.src = '/default-image.jpg';
}
}
// 重写 Image 构造函数
window.Image = function (width, height) {
const img = new OriginalImage(width, height);
let originalSrc = '';
Object.defineProperty(img, 'src', {
get: function () {
return originalSrc;
},
set: function (newSrc) {
originalSrc = newSrc;
if (newSrc) {
loadImageWithToken(newSrc, img);
}
}
});
return img;
};
// 处理已存在的 img 标签
window.addEventListener('DOMContentLoaded', () => {
document.querySelectorAll('img').forEach(img => {
const originalSrc = img.getAttribute('src');
if (originalSrc) {
loadImageWithToken(originalSrc, img);
}
// 监听 src 属性变化
const observer = new MutationObserver((mutations) => {
mutations.forEach((mutation) => {
if (mutation.type === 'attributes' && mutation.attributeName === 'src') {
const newSrc = img.getAttribute('src');
if (newSrc) {
loadImageWithToken(newSrc, img);
}
}
});
});
observer.observe(img, {
attributes: true,
attributeFilter: ['src']
});
});
});
</script>
<script type="module" src="/src/main.js"></script>
</body>
</html>
前端工程师、程序员
