在進行文章撰寫時，尋找適當的配圖是一項重要的任務。然而，盡管我嘗試在各大網站上尋找合適的圖片資源，但往往面臨兩個主要問題：其一，這些網站大多需要付費使用，這無疑增加了我的經濟負擔;其二，即使有些網站提供免費圖片，但其質量卻令人堪憂。
為了解決這個令人頭疼的問題，我自己動手一個搜索圖片的網站，解決了日常文章配圖的問題。整體的界面如下：
圖片的加載采用瀑布流的模式。
這個網站是站在巨人的肩膀上完成的，為什么這么說呢?圖片的來源是調用頭條號的圖片庫，前端是使用Github開源的瀑布流插件。
分析頭條圖片庫的API
打開頭條號發布文章，點擊添加圖片，會出現如下圖
通過分析這個接口，發現它并沒有做認證，攜帶幾個路徑參數。
在無痕瀏覽器重放這個接口，這能正常獲取數據，如下圖：
現在圖片的數據源找到了，可以把它做成接口，給前端用戶調用了。這里我選擇熟悉的FastAPI做接口。
接口代碼實現
從上述分析接口發現，路徑參數只有三個參數是動態變化的。所以，我們把它做成變量的形式：
from pydantic import BaseModel
class TuotiaoParams(BaseModel):
page: int=0#圖片頁數
size: int = 30#展示圖片的數量
term: str=None#搜索的關鍵字
然后，把請求頭條號API接口封裝成一個函數，方便后續調用：
import requests
from fake_useragent import UserAgent
from schemas import TuotiaoParams
from loguru import logger
def search_pic(params:TuotiaoParams):
try:
url = "https://dficimage.toutiao.com/api/proxy/get"
params = {
"from": params.page,
"size": params.size,
"term": params.term,
"search_id": 7274062948258316581,
"user_id": 68783357974,
"media_id": 1609422238702596,
"search_from": "search",
"position": "article_icstock",
"platform": "toutiaohao",
"path": "/micro/search"
}
res = requests.get(
url,
params=params,
headers={"User-Agent":UserAgent().random},
timeout=10
)
if res.json().get("code") == 1:
logger.info("獲取頭條的圖片的數據:{}".format(res.json()))
return res.json().get("data").get("data").get("hits")
except Exception as e:
logger.error('抓取頭條的圖片錯誤：{}'.format(e))
利用FastAPI把頭條號API做成接口模式：
from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware
from toutiao import search_pic
from schemas import SearchKeyWork,TuotiaoParams
import uvicorn
App = FastAPI()
# 添加跨域中間件
app.add_middleware(
CORSMiddleware,
allow_origins=["*"], # 允許所有來源訪問
allow_methods=["*"], # 允許所有HTTP方法
allow_headers=["*"], # 允許所有HTTP頭
)
@app.post("/image_toutAIo")
def iamge_toutiao(params:TuotiaoParams):
return {"code":1,"data":search_pic(params)}
if __name__ == "__main__":
uvicorn.run(app)
執行如下代碼啟動程序，就可以正常訪問接口：
Python/ target=_blank class=infotextkey>Python main.py
這樣后臺的接口，就完成了。
前端搭建
前端采用的github上開源的瀑布流圖片展示模板，然后，自己添加搜索功能的。
https://github.com/heikaimu/vue3-waterfall-plugin
下載vue3-waterfall-plugin項目到本地，執行如下代碼安裝依賴：
pnpm install
安裝完依賴，執行如下代碼，啟動前端：
pnpm run dev
啟動成功之后，輸入想要的圖片進行搜索，如圖：
- 項目的地址: https://github.com/didiplus/vue3-waterfall-plugin
- 演示地址: http://img.kwpmp.cn/
- 演示備用地址: https://cerulean-florentine-527213.NETlify.app/
