今天做項目遇到個問題 請求的圖片需要加個請求頭參數才行
百度一番 找到一個有點用的參考地址 https://blog.csdn.net/qq_41499782/article/details/113584518
跟我想的差不多
大概意思就是把圖片地址用axios加上請求頭請求一次
下面是參考博主所記錄
在做項目的時候，展示圖片可能會用到nginx 的代理來進行展示，然而有些運維小哥哥喜歡展示技術，在展示圖片的時候還需要前提傳一個請求頭，也就是賬號和密碼。在postman展示的情況如下：
如果不使用這種方式，頁面直接展示401沒有權限。
解決方法
運維小哥哥一回頭，搞得菜雞的我就加班搞這個玩意，最后總結解決方法如下：
postman 請求源碼
img標簽請求攜帶請求頭
我們現在跨域思考一下，img標簽是沒有可以自定義請求頭的。網上說的那些，個人感覺都不行，一個爬一個。
我的解決辦法
分析： img src 是會自動發送請求的，所以我們可以認為src 里面的就是一個接口，只是該接口返回的是圖片流數據，那么我們就可以在拿到圖片地址的時候再來一次axios請求,在本次請求中加入請求頭。
代碼如下：
/**
* 獲取base64位的圖片
* @param fileName {String} 文件名稱
* @param caseId {String} 賠案號
* @returns {Promise<string>}
*/
export async function getImgURLOfBase64(fileName, caseId) {
// 這里獲取圖片的地址，如果知道地址，直接繞過這部
const res = await getImgUrl({
// ...獲取圖片地址的參數
})
if (!res.data || res.data.length === 0) return '';
// 通過圖片地址獲取圖片，從新獲取圖片
var config = {
method: 'get',
responseType: 'arraybuffer',
url: '對應地址',
headers: {
// postman 中的請求頭
}
};
// 重新獲取請求，獲取的是base64位的圖片
return await axios(config).then(response => {
return 'data:image/png;base64,' + btoa(new Uint8Array(response.data).reduce((data, byte) => data + String.fromCharCode(byte), ''));
})
}
把上面獲取的base位的圖片地址放在對應img src 里面就行了。
但是我 做的時候遇到個問題
vue 往圖片放處理后的地址的時候 說返回的是promise
經過處理 終於實現了效果