1. 方式一：后端傳送base64編碼后的圖片
-
后端python代碼
# 前端訪問接口/image?skuid=999999
@app.route("/image", methods = ["get"])
def sendImage():
skuid = request.args.get('skuid')
img_stream = ''
img_local_path = "./templates/images/" + skuid + "..jpg" # 準(zhǔn)備發(fā)送給前端圖片的路徑
with open(img_local_path, 'rb') as img_f:
img_stream = img_f.read()
img_stream = base64.b64encode(img_stream)
return img_stream
-
前端js代碼
//請求圖片
const commodity_image = document.createElement("img");
let image_request = new XMLHttpRequest();
let imageURL="/image?skuid=" + r[j]["skuid"]; //r[j]["skuid"]為get請求參數(shù)skuid的值
image_request.open("GET", imageURL);
image_request.send();
//服務(wù)端返回圖片的base64編碼后將其以圖片方式展示到界面上（在返回的編碼前面加上"data:image/jpeg;base64,"即可）
image_request.onload = function () {
let image_r = image_request.response;
let imageSRC = "data:image/jpeg;base64," + image_r;
commodity_image.src = imageSRC
}
//然后把commodity_image加到網(wǎng)頁的 Document 對象中即可
-
前端圖片的src
這種方式前端圖片的src將會是一大串編碼（即data:image/jpeg;base64,加上圖片的base64編碼）
2. 方式二：后端傳送base64編碼后的圖片（優(yōu)）
-
后端python代碼
from flask import make_response
@app.route("/image", methods = ["get"])
def sendImage():
skuid = request.args.get('skuid')
img_local_path = "./templates/images/" + skuid + "..jpg"
img_f = open(img_local_path, 'rb')
res = make_response(img_f.read()) # 用flask提供的make_response 方法來自定義自己的response對象
res.headers['Content-Type'] = 'image/jpg' # 設(shè)置response對象的請求頭屬性'Content-Type'為圖片格式
img_f.close()
return res
-
前端js代碼
const commodity_image = document.createElement("img");
let imageURL="/image?skuid=" + r[j]["skuid"];
commodity_image.src = imageURL;
-
前端圖片的src
image.png
